/* =============================================================
   O TEMPO NO FUNDO DA PLANTAÇÃO
=============================================================

   Regra que decide tudo aqui: a planta é o assunto, o tempo é o fundo.
   Nada nesta folha pode competir com o desenho da planta nem com os
   números embaixo dela. Se você reparar no fundo antes de ver quantos
   contatos entraram, o fundo está errado.

   Duas coisas fazem parecer VIDA e não semáforo:

     - o tempo ENTRA e SAI devagar, em vez de piscar de um para o outro;
     - dentro de cada tempo há variações que não mudam o significado —
       passa uma nuvem, cai uma garoa, abre de novo.

   Sobre custo: a chuva é um ladrilho escorregando, não mil gotinhas; o
   que está fora de cena fica com a animação PAUSADA (animação de
   elemento escondido ainda gasta quadro em vários navegadores); e todo
   movimento morre com `prefers-reduced-motion`.
*/

.tp-camada {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    /* O tempo se apaga onde o texto vive.
       -------------------------------------------------------------
       A chuva atravessando "37 de 50" não era bonita, era ilegível — e
       o número é o motivo de a tela existir. A máscara deixa o tempo
       forte lá em cima, onde há céu, e quase sumido embaixo, onde há
       número e botão. Não some de todo: chuva que para no meio do ar
       fica pior que chuva nenhuma. */
    -webkit-mask-image: linear-gradient(to bottom,
        #000 0%, #000 46%, rgba(0, 0, 0, .55) 64%, rgba(0, 0, 0, .18) 78%, rgba(0, 0, 0, .12) 100%);
    mask-image: linear-gradient(to bottom,
        #000 0%, #000 46%, rgba(0, 0, 0, .55) 64%, rgba(0, 0, 0, .18) 78%, rgba(0, 0, 0, .12) 100%);
}

/* E uma sombra atrás do bloco de texto, para o contraste não depender
   de qual tempo está pintado. */
.clh-canteiro-caixa::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 58%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(8, 9, 14, .30) 52%, rgba(8, 9, 14, .55) 100%);
}

/* A planta e os números vivem acima do tempo. */
.clh-canteiro,
.clh-linha-central,
.clh-acoes,
.clh-fila-detalhe,
.clh-teste { position: relative; z-index: 1; }

/* =============================================================
   ENTRAR E SAIR DEVAGAR
=============================================================
   `display: none` não tem meio-termo: o tempo piscaria de sol para
   chuva num quadro só. Com visibilidade a transição existe, e a
   animação pausada garante que o que está fora de cena não custa nada.
*/

.tp-sol, .tp-nuvem, .tp-chuva, .tp-raio, .tp-folhinha, .tp-queda {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.6s ease, visibility 0s linear 1.6s;
}

/* A pausa precisa de MAIS PESO que a linha que define a animação.
   -------------------------------------------------------------
   Cada elemento declara a sua com o atalho "animation:", e o atalho
   RESETA o estado de pausa para "rodando". Escrito com o mesmo peso, o
   atalho vinha depois e ganhava — a chuva invisível continuava caindo
   atrás do sol, gastando quadro a noite inteira sem ninguém ver.

   Com ".tp-camada" na frente, a pausa passa a valer sempre, e as regras
   de cada tempo (que têm mais peso ainda) continuam podendo soltar. */
.tp-camada .tp-sol,
.tp-camada .tp-nuvem,
.tp-camada .tp-chuva,
.tp-camada .tp-raio,
.tp-camada .tp-folhinha,
.tp-camada .tp-queda { animation-play-state: paused; }

/* ---------- o céu ---------- */

.tp-ceu {
    position: absolute;
    inset: 0;
    transition: background 1.8s ease;
    background: var(--tp-ceu, transparent);
}

/* Cada tempo tem o seu céu. Só gradientes translúcidos por cima do
   fundo do painel: cor sólida aqui brigaria com a borda arredondada da
   caixa e com o tema. */
.clh-canteiro-caixa[data-tempo="sereno"],
.clh-canteiro-caixa[data-tempo="parado-noite"] {
    --tp-ceu: radial-gradient(120% 88% at 50% 0%, rgba(58, 78, 148, .17) 0%, transparent 62%),
              radial-gradient(80% 58% at 50% 100%, rgba(70, 150, 100, .09) 0%, transparent 70%);
}

.clh-canteiro-caixa[data-tempo="sol"] {
    --tp-ceu: radial-gradient(120% 92% at 62% -6%, rgba(255, 190, 105, .16) 0%, transparent 58%),
              radial-gradient(120% 80% at 50% 0%, rgba(96, 148, 220, .15) 0%, transparent 66%),
              radial-gradient(80% 58% at 50% 100%, rgba(80, 165, 110, .11) 0%, transparent 70%);
}

.clh-canteiro-caixa[data-tempo="chuva"] {
    --tp-ceu: radial-gradient(130% 95% at 50% -8%, rgba(72, 96, 138, .22) 0%, transparent 64%),
              radial-gradient(80% 58% at 50% 100%, rgba(70, 150, 115, .10) 0%, transparent 70%);
}

.clh-canteiro-caixa[data-tempo="ventania"] {
    --tp-ceu: radial-gradient(130% 92% at 30% -4%, rgba(118, 116, 150, .17) 0%, transparent 62%),
              radial-gradient(80% 58% at 50% 100%, rgba(80, 150, 110, .08) 0%, transparent 70%);
}

.clh-canteiro-caixa[data-tempo="nublado"] {
    --tp-ceu: radial-gradient(130% 95% at 50% -6%, rgba(96, 100, 122, .20) 0%, transparent 66%);
}

.clh-canteiro-caixa[data-tempo="tempestade"] {
    --tp-ceu: radial-gradient(130% 98% at 50% -10%, rgba(58, 60, 92, .30) 0%, transparent 64%),
              radial-gradient(80% 58% at 50% 100%, rgba(60, 80, 90, .10) 0%, transparent 70%);
}

.clh-canteiro-caixa[data-tempo="parado"] {
    --tp-ceu: radial-gradient(120% 90% at 50% 0%, rgba(120, 104, 128, .10) 0%, transparent 64%);
}

/* ---------- estrelas: só em céu aberto e de noite ---------- */

.pl-ceu { transition: opacity 1.6s ease; }

.clh-canteiro-caixa[data-tempo="chuva"] .pl-ceu,
.clh-canteiro-caixa[data-tempo="tempestade"] .pl-ceu,
.clh-canteiro-caixa[data-tempo="parado"] .pl-ceu,
.clh-canteiro-caixa[data-tempo="sol"] .pl-ceu { opacity: 0; }

.clh-canteiro-caixa[data-tempo="nublado"] .pl-ceu,
.clh-canteiro-caixa[data-tempo="ventania"] .pl-ceu { opacity: .35; }

/* Nuvem alta numa noite serena apaga um pouco as estrelas. */
.clh-canteiro-caixa[data-ambiente="nuvens-altas"] .pl-ceu { opacity: .62; }

/* ---------- o sol ---------- */

.tp-sol {
    position: absolute;
    left: var(--tp-sol-x, 62%);
    top: var(--tp-sol-y, 16%);
    width: 96px; height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 208, 130, .34) 0%,
                                        rgba(255, 190, 110, .12) 42%, transparent 68%);
    animation: tpRespira 6.5s ease-in-out infinite alternate;
    transition: opacity 2.2s ease, visibility 0s linear 2.2s, left 3s ease, top 3s ease;
}
.tp-sol-miolo {
    position: absolute;
    inset: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #ffe6b4 0%, #ffc871 62%, #f0a94e 100%);
    box-shadow: 0 0 18px rgba(255, 196, 116, .45);
}
@keyframes tpRespira { from { transform: scale(1); } to { transform: scale(1.07); } }

.clh-canteiro-caixa[data-tempo="sol"] .tp-sol {
    opacity: 1; visibility: visible; animation-play-state: running;
    transition: opacity 2.2s ease, visibility 0s, left 3s ease, top 3s ease;
}

/* Fora da janela, de dia: o sol aparece apagado, parado no alto. Não
   fingir movimento é mais honesto que sumir com ele. */
.clh-canteiro-caixa[data-tempo="parado"] .tp-sol {
    opacity: .28; visibility: visible; animation-play-state: paused;
    transition: opacity 2.2s ease, visibility 0s;
}

/* Nuvem passando na frente abafa o sol um pouco. */
.clh-canteiro-caixa[data-tempo="sol"][data-ambiente="nuvens"] .tp-sol { opacity: .68; }

/* ---------- nuvens ---------- */

.tp-nuvem {
    position: absolute;
    border-radius: 50%;
    filter: blur(16px);
    background: radial-gradient(circle at 40% 45%,
                rgba(190, 198, 226, .17) 0%, rgba(150, 158, 190, .08) 55%, transparent 74%);
}
.tp-n1 { width: 240px; height: 88px; top: 9%;  left: -32%; animation: tpNuvem 46s linear infinite; }
.tp-n2 { width: 320px; height: 70px; top: 22%; left: -48%; animation: tpNuvem 68s linear infinite -14s; }
.tp-n3 { width: 180px; height: 60px; top: 3%;  left: -26%; animation: tpNuvem 54s linear infinite -33s; }
.tp-n4 { width: 210px; height: 54px; top: 15%; left: -30%; animation: tpNuvem 61s linear infinite -47s; }

@keyframes tpNuvem { to { transform: translateX(210%); } }

/* Quem tem nuvem: os tempos fechados sempre, e os abertos só quando o
   ambiente da vez pede. */
.clh-canteiro-caixa[data-tempo="nublado"] .tp-nuvem,
.clh-canteiro-caixa[data-tempo="chuva"] .tp-nuvem,
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-nuvem,
.clh-canteiro-caixa[data-ambiente="nuvens"] .tp-nuvem {
    opacity: 1; visibility: visible; animation-play-state: running;
    transition: opacity 2.4s ease, visibility 0s;
}

/* Nuvem alta é fiapo: aparece pouco, e só duas. */
.clh-canteiro-caixa[data-ambiente="nuvens-altas"] .tp-n1,
.clh-canteiro-caixa[data-ambiente="nuvens-altas"] .tp-n3 {
    opacity: .45; visibility: visible; animation-play-state: running;
    transition: opacity 2.4s ease, visibility 0s;
}

.clh-canteiro-caixa[data-tempo="tempestade"] .tp-nuvem { filter: blur(13px); }
.clh-canteiro-caixa[data-tempo="ventania"] .tp-n1 { animation-duration: 17s; }
.clh-canteiro-caixa[data-tempo="ventania"] .tp-n2 { animation-duration: 24s; }
.clh-canteiro-caixa[data-tempo="ventania"] .tp-n3 { animation-duration: 20s; }
.clh-canteiro-caixa[data-tempo="ventania"] .tp-n4 { animation-duration: 22s; }

/* ---------- chuva ----------
   `linear-gradient` só varia num sentido: cada ladrilho vira uma faixa
   da largura inteira, e repetido dá listra. `radial-gradient` com raios
   diferentes faz um oval de 1px por 12px — que é exatamente o risco que
   uma gota deixa. */

.tp-chuva {
    position: absolute;
    /* Sobra de fora para a camada poder girar sem mostrar canto vazio. */
    inset: -34% -28%;
    background-repeat: repeat;
}

.tp-c1 {
    background-image: radial-gradient(1.1px 12px at 34% 32%,
        rgba(206, 228, 255, .62) 0%, rgba(206, 228, 255, 0) 100%);
    background-size: 26px 84px;
    transform: rotate(12deg);
    animation: tpChove .58s linear infinite;
}
.tp-c2 {
    background-image: radial-gradient(1px 9px at 62% 18%,
        rgba(180, 204, 246, .34) 0%, rgba(180, 204, 246, 0) 100%);
    background-size: 41px 119px;
    transform: rotate(9deg);
    animation: tpChoveFundo 1.15s linear infinite;
}

/* Cada camada anda exatamente a altura do próprio ladrilho: qualquer
   outro valor faz a chuva "pular" no fim do laço. */
@keyframes tpChove      { to { background-position: 0 84px; } }
@keyframes tpChoveFundo { to { background-position: 0 119px; } }

.clh-canteiro-caixa[data-tempo="chuva"] .tp-chuva,
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-chuva,
.clh-canteiro-caixa[data-ambiente="garoa"] .tp-chuva {
    opacity: 1; visibility: visible; animation-play-state: running;
    transition: opacity 1.6s ease, visibility 0s;
}

/* Garoa é chuva de mentirinha: fininha e devagar. */
.clh-canteiro-caixa[data-ambiente="garoa"] .tp-c1 { opacity: .45; animation-duration: .9s; }
.clh-canteiro-caixa[data-ambiente="garoa"] .tp-c2 { opacity: .35; animation-duration: 1.6s; }

/* Na tempestade a chuva vem mais rápida, mais inclinada e mais fechada. */
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-c1 {
    animation-duration: .34s;
    transform: rotate(21deg);
    background-size: 17px 84px;
    background-image: radial-gradient(1.3px 17px at 40% 30%,
        rgba(214, 232, 255, .7) 0%, rgba(214, 232, 255, 0) 100%);
}
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-c2 {
    animation-duration: .62s;
    transform: rotate(18deg);
    background-size: 29px 119px;
    background-image: radial-gradient(1.1px 13px at 58% 16%,
        rgba(192, 214, 252, .42) 0%, rgba(192, 214, 252, 0) 100%);
}

/* ---------- o relâmpago ----------
   Quase sempre invisível: dois piscos e nove segundos de nada. Mais que
   isso vira videogame, e a tela fica aberta a noite inteira. */

.tp-raio {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(214, 228, 255, .5) 0%, rgba(190, 210, 255, .06) 46%, transparent 72%);
    animation: tpRaio 11s linear infinite;
}
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-raio {
    visibility: visible; animation-play-state: running;
    transition: visibility 0s;
}
@keyframes tpRaio {
    0%, 3.4%   { opacity: 0; }
    3.7%       { opacity: .85; }
    4.1%       { opacity: .08; }
    4.5%       { opacity: .62; }
    5.4%       { opacity: 0; }
    100%       { opacity: 0; }
}

/* ---------- folhinhas ao vento ----------
   Estas atravessam a tela de lado. Cinco bastam: o olho não conta folha
   voando. */

.tp-folhinha {
    position: absolute;
    left: 0;
    width: 9px; height: 5px;
    border-radius: 60% 20% 60% 20%;
    background: rgba(126, 176, 130, .5);
}
.tp-f1 { top: 28%; animation: tpVoa 5.2s linear infinite; }
.tp-f2 { top: 44%; animation: tpVoa 6.8s linear infinite -1.1s; width: 7px; height: 4px; }
.tp-f3 { top: 61%; animation: tpVoa 4.4s linear infinite -2.3s; }
.tp-f4 { top: 36%; animation: tpVoa 7.6s linear infinite -3.4s; width: 6px; height: 3.5px; }
.tp-f5 { top: 71%; animation: tpVoa 5.9s linear infinite -4.6s; }

@keyframes tpVoa {
    from { transform: translate(-40px, 0) rotate(0deg); opacity: 0; }
    12%  { opacity: .9; }
    82%  { opacity: .8; }
    to   { transform: translate(460px, -34px) rotate(420deg); opacity: 0; }
}

.clh-canteiro-caixa[data-tempo="ventania"] .tp-folhinha,
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-folhinha {
    opacity: 1; visibility: visible; animation-play-state: running;
    transition: opacity 1.2s ease, visibility 0s;
}
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-folhinha { animation-duration: 2.6s; }

/* ---------- a folha que CAI ----------
   Esta existe em TODO tempo, devagar. Planta viva perde folha, e uma
   folha descendo de vez em quando é o que faz a tela respirar num dia
   parado — sem ela, "sereno" é uma fotografia. */

.tp-queda {
    position: absolute;
    width: 8px; height: 5px;
    border-radius: 62% 18% 62% 18%;
    background: rgba(110, 168, 118, .55);
}
.tp-q1 { left: 38%; top: 20%; animation: tpCai 17s ease-in infinite; }
.tp-q2 { left: 58%; top: 27%; animation: tpCai 21s ease-in infinite -7s; width: 7px; height: 4px; }
.tp-q3 { left: 46%; top: 16%; animation: tpCai 19s ease-in infinite -13s; }
.tp-q4 { left: 63%; top: 34%; animation: tpCai 23s ease-in infinite -4s; width: 6px; height: 4px; }

/* A queda balança: folha não desce em linha reta, e uma que descesse
   pareceria um pixel escorregando. */
@keyframes tpCai {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    6%   { opacity: .8; }
    22%  { transform: translate(15px, 46px) rotate(75deg); }
    44%  { transform: translate(-11px, 96px) rotate(168deg); }
    66%  { transform: translate(17px, 146px) rotate(255deg); }
    88%  { transform: translate(-6px, 192px) rotate(330deg); opacity: .5; }
    100% { transform: translate(3px, 216px) rotate(360deg); opacity: 0; }
}

/* Em tempo calmo caem só duas, bem espaçadas. */
.clh-canteiro-caixa .tp-q1,
.clh-canteiro-caixa .tp-q2 {
    opacity: 1; visibility: visible; animation-play-state: running;
    transition: opacity 1.6s ease, visibility 0s;
}

/* Com vento ou tempestade caem as quatro e mais depressa — aí a folha
   caindo deixa de ser respiração e vira aviso. */
.clh-canteiro-caixa[data-tempo="ventania"] .tp-queda,
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-queda {
    opacity: 1; visibility: visible; animation-play-state: running;
    transition: opacity 1.6s ease, visibility 0s;
}
.clh-canteiro-caixa[data-tempo="ventania"] .tp-queda  { animation-duration: 7s; }
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-queda {
    animation-duration: 4.6s;
    background: rgba(168, 148, 87, .6);
}

/* Nada cai de uma planta que ainda não nasceu. */
.clh-canteiro-caixa[data-vazio="1"] .tp-queda {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =============================================================
   A PLANTA REAGE
=============================================================

   O desenho da planta é o mesmo em todo tempo — o que muda é como ela
   se mexe. Isso é de propósito: mexer no desenho por causa do fundo
   seria a maneira mais fácil de quebrar tudo.

   São DUAS camadas de movimento, e é a soma delas que dá vida:

     1. a planta inteira balança pela base;
     2. cada galho tem o próprio balanço, no próprio tempo.

   Só a primeira dava um adesivo girando. Planta de verdade tem o galho
   de baixo firme e a ponta de cima solta.
*/

.pl-balanca { animation: plBalanco 7.5s ease-in-out infinite alternate; }
@keyframes plBalanco { from { transform: rotate(-0.7deg); } to { transform: rotate(0.7deg); } }

.pl-ramo { animation: plRamo 5s ease-in-out infinite alternate; }
@keyframes plRamo {
    from { transform: rotate(-1.1deg); }
    to   { transform: rotate(1.4deg); }
}

/* Chuva: mais lento e mais curto — folha molhada é folha pesada. */
.clh-canteiro-caixa[data-tempo="chuva"] .pl-balanca {
    animation-duration: 9.5s;
    animation-name: plChuva;
}
@keyframes plChuva { from { transform: rotate(-0.45deg); } to { transform: rotate(0.45deg); } }
.clh-canteiro-caixa[data-tempo="chuva"] .pl-ramo { animation-duration: 6.5s; }

/* Ventania: inclina para um lado e volta. Não é o mesmo que balançar
   mais rápido — vento empurra, e o desenho tem que dizer isso. */
.clh-canteiro-caixa[data-tempo="ventania"] .pl-balanca {
    animation: plVento 2.6s ease-in-out infinite alternate;
}
@keyframes plVento {
    from { transform: rotate(0.4deg) skewX(0deg); }
    to   { transform: rotate(3.2deg) skewX(-1.6deg); }
}
.clh-canteiro-caixa[data-tempo="ventania"] .pl-ramo {
    animation-name: plRamoVento;
    animation-duration: 1.5s;
}
@keyframes plRamoVento {
    from { transform: rotate(-0.6deg); }
    to   { transform: rotate(4.2deg); }
}

/* Tempestade: sem cadência. O passo desigual é o que faz parecer
   rajada em vez de metrônomo. */
.clh-canteiro-caixa[data-tempo="tempestade"] .pl-balanca {
    animation: plTempestade 3.4s ease-in-out infinite;
}
@keyframes plTempestade {
    0%   { transform: rotate(-1.2deg) skewX(0.6deg); }
    18%  { transform: rotate(3.8deg) skewX(-2deg); }
    31%  { transform: rotate(1.4deg) skewX(-0.6deg); }
    52%  { transform: rotate(4.4deg) skewX(-2.4deg); }
    68%  { transform: rotate(-0.6deg) skewX(0.4deg); }
    84%  { transform: rotate(2.6deg) skewX(-1.4deg); }
    100% { transform: rotate(-1.2deg) skewX(0.6deg); }
}
.clh-canteiro-caixa[data-tempo="tempestade"] .pl-ramo {
    animation-name: plRamoVento;
    animation-duration: 1.1s;
}

/* Nublado e parado: quase parada. */
.clh-canteiro-caixa[data-tempo="nublado"] .pl-balanca { animation-duration: 11s; }
.clh-canteiro-caixa[data-tempo="nublado"] .pl-ramo { animation-duration: 8s; }
.clh-canteiro-caixa[data-tempo="parado"] .pl-balanca,
.clh-canteiro-caixa[data-tempo="parado-noite"] .pl-balanca {
    animation: plQuieta 13s ease-in-out infinite alternate;
}
@keyframes plQuieta { from { transform: rotate(-0.25deg); } to { transform: rotate(0.25deg); } }
.clh-canteiro-caixa[data-tempo="parado"] .pl-ramo,
.clh-canteiro-caixa[data-tempo="parado-noite"] .pl-ramo { animation-duration: 10s; }

/* Na estufa são doze plantas de uma vez. Elas balançam — o atraso de
   cada uma sai da semente, então nunca em bloco — mas sem o balanço de
   galho: noventa e seis grupos animados num canto da tela é gasto que
   ninguém vai reparar em ganho. */
.pl-mini .pl-ramo { animation: none; }

/* =============================================================
   QUEM PEDIU PARA A TELA PARAR
=============================================================
   Uma pessoa que marcou "reduzir movimento" no sistema não deveria
   receber chuva caindo e planta balançando a noite inteira. O tempo
   continua LEGÍVEL — o céu, o sol e as nuvens ficam lá, parados. */

@media (prefers-reduced-motion: reduce) {
    .pl-balanca, .pl-ramo,
    .tp-sol, .tp-nuvem, .tp-chuva, .tp-raio, .tp-folhinha, .tp-queda {
        animation: none !important;
    }
    .tp-chuva { opacity: .5; }
    .tp-folhinha, .tp-queda { visibility: hidden !important; }
    .tp-nuvem { left: 12%; }
    .tp-n2 { left: 48%; }
    .tp-n3 { left: 70%; }
    .tp-n4 { left: 30%; }
}

/* =============================================================
   A ETIQUETA DO TEMPO
=============================================================
   Não é um controle: é um rótulo. O tempo muda sozinho conforme a
   colheita, e tocar nele só conta por que ele está assim. */

.clh-tempo-selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--text-faint);
    font-size: 11.5px;
    cursor: help;
    transition: color .16s ease, background .16s ease;
}
.clh-tempo-selo:hover { color: var(--text-muted); background: rgba(255, 255, 255, .03); }
.clh-tempo-selo i { font-size: 10.5px; }

.clh-tempo-frase {
    max-width: 320px;
    margin: 0 auto;
    padding: 0 14px;
    text-align: center;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-faint);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
.clh-tempo-frase.aberta { max-height: 60px; opacity: 1; margin-top: 2px; }

/* =============================================================
   NO CELULAR
=============================================================
   Menos partícula e menos desfoque. Não é preguiça: `filter: blur` numa
   nuvem de 320px é caro em telefone, e a tela fica aberta por horas com
   a bateria contando. */

@media (max-width: 780px) {
    .tp-n3, .tp-n4 { display: none !important; }
    .tp-nuvem { filter: blur(11px); }
    .tp-n1 { width: 170px; height: 62px; }
    .tp-n2 { width: 210px; height: 52px; }

    .tp-f4, .tp-f5 { display: none !important; }
    .tp-q3, .tp-q4 { display: none !important; }

    .tp-sol { width: 74px; height: 74px; margin: -37px 0 0 -37px; }
    .tp-sol-miolo { inset: 27px; }
}


/* =============================================================
   A PAISAGEM ATRÁS DA PLANTA
=============================================================

   A planta estava num vazio. Agora ela está num LUGAR — e a diferença
   entre as duas coisas é o que faz olhar por dez minutos em vez de um.

   Quatro planos de profundidade, do mais longe ao mais perto: serra,
   mata distante, neblina, mata próxima. Depois o chão e o capim da
   frente. A neblina entre as duas matas é o que vende a distância: sem
   ela, dois desenhos de árvore viram um desenho de árvore mais grosso.

   -------------------------------------------------------------
   Três decisões que valem explicação
   -------------------------------------------------------------

   1. NADA ROLA PARA O LADO. A tentação era fazer paralaxe — a mata de
      trás andando devagar, a da frente mais rápido. Ficaria bonito e
      estaria errado: paralaxe lateral diz que a CÂMERA está andando, e
      aqui ela está parada, olhando uma planta. O movimento vai só onde
      a natureza põe: a neblina anda, o vento balança, o bicho atravessa.

   2. SÃO MÁSCARAS, NÃO IMAGENS. A forma mora no SVG e a cor mora aqui.
      Assim a mesma silhueta serve para a noite azul, o meio-dia claro e
      a tempestade quase preta, sem repetir um byte de desenho.

   3. UM ELEMENTO POR PLANO. Quatro camadas inteiras custam menos que
      trinta árvores animadas separadamente — e esta tela fica aberta a
      noite toda na máquina de alguém.

   E a regra que continua valendo acima de todas: a planta é o assunto.
   Se você reparar na floresta antes de ver quantos contatos entraram, a
   floresta está errada. Por isso tudo aqui é escuro, sem contorno e sem
   brilho próprio.
*/

.tp-serra, .tp-mata, .tp-capim, .tp-chao, .tp-neblina {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    /* Some junto com o resto do tempo, no mesmo compasso. */
    transition: opacity 1.6s ease, background-color 1.8s ease;
}

/* O horizonte é medido em JavaScript e chega aqui como variável: é a
   base da planta, em pixels. O palpite de 55% só valeria para uma
   altura de caixa, e a caixa muda com o texto e com a tela. */
.tp-serra   { bottom: calc(100% - var(--tp-horizonte, 55%)); height: 104px; }
.tp-mata-longe { bottom: calc(100% - var(--tp-horizonte, 55%)); height: 42px; }
.tp-mata-perto { bottom: calc(100% - var(--tp-horizonte, 55%)); height: 62px; }
.tp-capim   { bottom: calc(100% - var(--tp-horizonte, 55%) - 6px); height: 19px; }

.tp-serra {
    background: #2b3550;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22150%22%20viewBox%3D%220%200%20900%20150%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C150%20L0%2C63.0%20Q34.9%2C63.0%2034.9%2C63.2%20Q52.3%2C63.3%2069.7%2C63.3%20Q115.9%2C63.3%20115.9%2C59.5%20Q139.0%2C55.7%20162.1%2C55.7%20Q198.3%2C55.7%20198.3%2C60.6%20Q216.4%2C65.6%20234.5%2C65.6%20Q262.9%2C65.6%20262.9%2C62.5%20Q277.1%2C59.5%20291.3%2C59.5%20Q330.4%2C59.5%20330.4%2C70.8%20Q350.0%2C82.2%20369.6%2C82.2%20Q395.8%2C82.2%20395.8%2C62.4%20Q408.9%2C42.6%20422.1%2C42.6%20Q448.2%2C42.6%20448.2%2C63.1%20Q461.3%2C83.6%20474.4%2C83.6%20Q515.1%2C83.6%20515.1%2C52.5%20Q535.4%2C21.4%20555.7%2C21.4%20Q603.3%2C21.4%20603.3%2C58.8%20Q627.1%2C96.1%20650.9%2C96.1%20Q690.5%2C96.1%20690.5%2C82.0%20Q710.4%2C67.9%20730.2%2C67.9%20Q758.0%2C67.9%20758.0%2C43.5%20Q771.9%2C19.2%20785.8%2C19.2%20Q822.5%2C19.2%20822.5%2C21.0%20Q840.8%2C22.8%20859.2%2C22.8%20Q879.6%2C22.8%20879.6%2C42.9%20Q889.8%2C63.0%20900.0%2C63.0%20L900%2C150%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22900%22%20height%3D%22150%22%20viewBox%3D%220%200%20900%20150%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C150%20L0%2C63.0%20Q34.9%2C63.0%2034.9%2C63.2%20Q52.3%2C63.3%2069.7%2C63.3%20Q115.9%2C63.3%20115.9%2C59.5%20Q139.0%2C55.7%20162.1%2C55.7%20Q198.3%2C55.7%20198.3%2C60.6%20Q216.4%2C65.6%20234.5%2C65.6%20Q262.9%2C65.6%20262.9%2C62.5%20Q277.1%2C59.5%20291.3%2C59.5%20Q330.4%2C59.5%20330.4%2C70.8%20Q350.0%2C82.2%20369.6%2C82.2%20Q395.8%2C82.2%20395.8%2C62.4%20Q408.9%2C42.6%20422.1%2C42.6%20Q448.2%2C42.6%20448.2%2C63.1%20Q461.3%2C83.6%20474.4%2C83.6%20Q515.1%2C83.6%20515.1%2C52.5%20Q535.4%2C21.4%20555.7%2C21.4%20Q603.3%2C21.4%20603.3%2C58.8%20Q627.1%2C96.1%20650.9%2C96.1%20Q690.5%2C96.1%20690.5%2C82.0%20Q710.4%2C67.9%20730.2%2C67.9%20Q758.0%2C67.9%20758.0%2C43.5%20Q771.9%2C19.2%20785.8%2C19.2%20Q822.5%2C19.2%20822.5%2C21.0%20Q840.8%2C22.8%20859.2%2C22.8%20Q879.6%2C22.8%20879.6%2C42.9%20Q889.8%2C63.0%20900.0%2C63.0%20L900%2C150%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: auto 104px; mask-size: auto 104px;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: 0 bottom; mask-position: 0 bottom;
    opacity: .62;
}

.tp-mata-longe {
    background: #1d2740;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22520%22%20height%3D%2274%22%20viewBox%3D%220%200%20520%2074%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-16.0%2C74%20L-16.0%2C55.5%20L-11.2%2C37.0%20L-6.4%2C18.5%20L0.0%2C2.9%20L6.4%2C18.5%20L11.2%2C37.0%20L16.0%2C55.5%20L16.0%2C74%20Z%20M8.7%2C74%20L8.7%2C58.8%20L11.7%2C43.7%20L14.7%2C28.5%20L18.7%2C15.7%20L22.8%2C28.5%20L25.8%2C43.7%20L28.8%2C58.8%20L28.8%2C74%20Z%20M23.5%2C74%20C23.5%2C56.0%2026.3%2C31.5%2030.9%2C31.1%20C35.6%2C31.5%2038.4%2C56.0%2038.4%2C74%20Z%20M37.2%2C74%20L37.2%2C64.5%20L38.7%2C55.0%20L40.2%2C45.6%20L42.2%2C37.5%20L44.3%2C45.6%20L45.8%2C55.0%20L47.3%2C64.5%20L47.3%2C74%20Z%20M38.5%2C74%20L38.5%2C59.6%20L41.8%2C45.3%20L45.2%2C30.9%20L49.7%2C18.8%20L54.2%2C30.9%20L57.6%2C45.3%20L60.9%2C59.6%20L60.9%2C74%20Z%20M50.2%2C74%20L50.2%2C56.9%20L53.9%2C39.9%20L57.7%2C22.8%20L62.6%2C8.3%20L67.6%2C22.8%20L71.3%2C39.9%20L75.0%2C56.9%20L75.0%2C74%20Z%20M71.1%2C74%20L71.1%2C55.1%20L74.7%2C36.1%20L78.3%2C17.2%20L83.2%2C1.1%20L88.0%2C17.2%20L91.7%2C36.1%20L95.3%2C55.1%20L95.3%2C74%20Z%20M89.2%2C74%20L89.2%2C59.0%20L92.6%2C44.1%20L96.0%2C29.1%20L100.5%2C16.5%20L105.0%2C29.1%20L108.4%2C44.1%20L111.8%2C59.0%20L111.8%2C74%20Z%20M102.9%2C74%20L102.9%2C60.0%20L106.1%2C46.0%20L109.4%2C32.1%20L113.7%2C20.2%20L118.1%2C32.1%20L121.3%2C46.0%20L124.6%2C60.0%20L124.6%2C74%20Z%20M121.1%2C74%20C121.1%2C48.7%20124.5%2C14.4%20130.0%2C13.8%20C135.6%2C14.4%20139.0%2C48.7%20139.0%2C74%20Z%20M132.4%2C74%20C132.4%2C45.9%20136.2%2C7.8%20142.4%2C7.1%20C148.6%2C7.8%20152.4%2C45.9%20152.4%2C74%20Z%20M148.5%2C74%20L148.5%2C64.4%20L150.2%2C54.8%20L152.0%2C45.1%20L154.3%2C37.0%20L156.6%2C45.1%20L158.4%2C54.8%20L160.1%2C64.4%20L160.1%2C74%20Z%20M157.0%2C74%20C157.0%2C53.7%20160.0%2C26.2%20165.0%2C25.8%20C170.0%2C26.2%20173.1%2C53.7%20173.1%2C74%20Z%20M164.0%2C74%20C164.0%2C46.5%20168.6%2C9.2%20176.1%2C8.6%20C183.6%2C9.2%20188.2%2C46.5%20188.2%2C74%20Z%20M177.3%2C74%20L177.3%2C56.9%20L181.3%2C39.8%20L185.2%2C22.8%20L190.5%2C8.3%20L195.8%2C22.8%20L199.7%2C39.8%20L203.7%2C56.9%20L203.7%2C74%20Z%20M195.3%2C74%20L195.3%2C59.3%20L199.0%2C44.6%20L202.8%2C29.9%20L207.8%2C17.5%20L212.8%2C29.9%20L216.6%2C44.6%20L220.3%2C59.3%20L220.3%2C74%20Z%20M222.7%2C74%20C222.7%2C56.4%20226.3%2C32.5%20232.3%2C32.0%20C238.2%2C32.5%20241.8%2C56.4%20241.8%2C74%20Z%20M238.6%2C74%20L238.6%2C64.5%20L240.9%2C55.1%20L243.2%2C45.6%20L246.3%2C37.6%20L249.4%2C45.6%20L251.7%2C55.1%20L254.0%2C64.5%20L254.0%2C74%20Z%20M246.5%2C74%20L246.5%2C56.7%20L251.0%2C39.4%20L255.5%2C22.1%20L261.5%2C7.5%20L267.5%2C22.1%20L272.0%2C39.4%20L276.5%2C56.7%20L276.5%2C74%20Z%20M289.6%2C74%20C289.6%2C38.0%20294.5%2C16.3%20294.7%2C1.9%20L296.5%2C1.9%20C296.7%2C16.3%20292.8%2C38.0%20292.8%2C74%20Z%20M295.6%2C1.9%20Q280.9%2C-10.3%20268.8%2C-4.8%20Q280.9%2C-5.7%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q287.6%2C-15.6%20281.1%2C-11.4%20Q287.6%2C-11.4%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q294.4%2C-14.0%20293.4%2C-10.9%20Q294.4%2C-10.7%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q302.4%2C-16.8%20308.0%2C-12.6%20Q302.4%2C-12.5%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q309.3%2C-10.2%20320.6%2C-5.0%20Q309.3%2C-5.8%20295.6%2C3.4%20Z%20M300.6%2C74%20L300.6%2C62.8%20L302.3%2C51.7%20L304.1%2C40.5%20L306.5%2C31.0%20L308.8%2C40.5%20L310.6%2C51.7%20L312.4%2C62.8%20L312.4%2C74%20Z%20M297.9%2C74%20C297.9%2C44.0%20304.0%2C3.3%20314.0%2C2.6%20C324.0%2C3.3%20330.1%2C44.0%20330.1%2C74%20Z%20M324.9%2C74%20L324.9%2C59.5%20L327.4%2C44.9%20L329.9%2C30.4%20L333.1%2C18.1%20L336.4%2C30.4%20L338.9%2C44.9%20L341.4%2C59.5%20L341.4%2C74%20Z%20M346.6%2C74%20C346.6%2C48.7%20350.1%2C33.4%20350.3%2C23.3%20L352.1%2C23.3%20C352.3%2C33.4%20349.8%2C48.7%20349.8%2C74%20Z%20M351.2%2C23.3%20Q340.9%2C14.7%20332.4%2C18.6%20Q340.9%2C17.9%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q345.6%2C11.0%20341.0%2C13.9%20Q345.6%2C13.9%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q350.4%2C12.1%20349.7%2C14.3%20Q350.4%2C14.5%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q356.0%2C10.1%20360.0%2C13.1%20Q356.0%2C13.1%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q360.9%2C14.8%20368.8%2C18.5%20Q360.9%2C17.8%20351.2%2C24.8%20Z%20M349.2%2C74%20L349.2%2C61.3%20L352.4%2C48.7%20L355.6%2C36.0%20L359.9%2C25.3%20L364.1%2C36.0%20L367.3%2C48.7%20L370.5%2C61.3%20L370.5%2C74%20Z%20M369.6%2C74%20L369.6%2C57.9%20L372.8%2C41.8%20L376.0%2C25.7%20L380.2%2C12.0%20L384.4%2C25.7%20L387.6%2C41.8%20L390.8%2C57.9%20L390.8%2C74%20Z%20M390.5%2C74%20C390.5%2C48.7%20394.1%2C14.5%20399.8%2C13.9%20C405.5%2C14.5%20409.0%2C48.7%20409.0%2C74%20Z%20M401.3%2C74%20L401.3%2C57.0%20L404.9%2C40.1%20L408.5%2C23.1%20L413.4%2C8.8%20L418.2%2C23.1%20L421.8%2C40.1%20L425.5%2C57.0%20L425.5%2C74%20Z%20M428.0%2C74%20L428.0%2C63.7%20L430.3%2C53.4%20L432.6%2C43.0%20L435.7%2C34.3%20L438.8%2C43.0%20L441.1%2C53.4%20L443.4%2C63.7%20L443.4%2C74%20Z%20M446.4%2C74%20C446.4%2C36.1%20451.4%2C13.4%20451.6%2C-1.8%20L453.4%2C-1.8%20C453.6%2C13.4%20449.6%2C36.1%20449.6%2C74%20Z%20M452.5%2C-1.8%20Q437.1%2C-14.7%20424.4%2C-8.8%20Q437.1%2C-9.8%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q444.1%2C-20.2%20437.3%2C-15.8%20Q444.1%2C-15.9%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q451.3%2C-18.5%20450.2%2C-15.2%20Q451.3%2C-15.0%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q459.7%2C-21.5%20465.6%2C-17.1%20Q459.7%2C-17.0%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q467.0%2C-14.6%20478.8%2C-9.0%20Q467.0%2C-10.0%20452.5%2C-0.3%20Z%20M449.7%2C74%20C449.7%2C50.0%20453.7%2C17.4%20460.2%2C16.9%20C466.7%2C17.4%20470.7%2C50.0%20470.7%2C74%20Z%20M467.7%2C74%20L467.7%2C60.1%20L470.5%2C46.1%20L473.3%2C32.2%20L477.1%2C20.4%20L480.8%2C32.2%20L483.6%2C46.1%20L486.5%2C60.1%20L486.5%2C74%20Z%20M477.0%2C74%20C477.0%2C53.0%20480.9%2C24.5%20487.4%2C24.0%20C493.9%2C24.5%20497.8%2C53.0%20497.8%2C74%20Z%20M498.4%2C74%20C498.4%2C55.8%20501.7%2C31.1%20507.0%2C30.6%20C512.4%2C31.1%20515.6%2C55.8%20515.6%2C74%20Z%20M512.8%2C74%20L512.8%2C60.5%20L514.9%2C47.1%20L517.1%2C33.6%20L519.9%2C22.2%20L522.8%2C33.6%20L524.9%2C47.1%20L527.1%2C60.5%20L527.1%2C74%20Z%20M504.0%2C74%20L504.0%2C55.5%20L508.8%2C37.0%20L513.6%2C18.5%20L520.0%2C2.9%20L526.4%2C18.5%20L531.2%2C37.0%20L536.0%2C55.5%20L536.0%2C74%20Z%20M528.7%2C74%20L528.7%2C58.8%20L531.7%2C43.7%20L534.7%2C28.5%20L538.7%2C15.7%20L542.8%2C28.5%20L545.8%2C43.7%20L548.8%2C58.8%20L548.8%2C74%20Z%20M0%2C72%20L520%2C72%20L520%2C74%20L0%2C74%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22520%22%20height%3D%2274%22%20viewBox%3D%220%200%20520%2074%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-16.0%2C74%20L-16.0%2C55.5%20L-11.2%2C37.0%20L-6.4%2C18.5%20L0.0%2C2.9%20L6.4%2C18.5%20L11.2%2C37.0%20L16.0%2C55.5%20L16.0%2C74%20Z%20M8.7%2C74%20L8.7%2C58.8%20L11.7%2C43.7%20L14.7%2C28.5%20L18.7%2C15.7%20L22.8%2C28.5%20L25.8%2C43.7%20L28.8%2C58.8%20L28.8%2C74%20Z%20M23.5%2C74%20C23.5%2C56.0%2026.3%2C31.5%2030.9%2C31.1%20C35.6%2C31.5%2038.4%2C56.0%2038.4%2C74%20Z%20M37.2%2C74%20L37.2%2C64.5%20L38.7%2C55.0%20L40.2%2C45.6%20L42.2%2C37.5%20L44.3%2C45.6%20L45.8%2C55.0%20L47.3%2C64.5%20L47.3%2C74%20Z%20M38.5%2C74%20L38.5%2C59.6%20L41.8%2C45.3%20L45.2%2C30.9%20L49.7%2C18.8%20L54.2%2C30.9%20L57.6%2C45.3%20L60.9%2C59.6%20L60.9%2C74%20Z%20M50.2%2C74%20L50.2%2C56.9%20L53.9%2C39.9%20L57.7%2C22.8%20L62.6%2C8.3%20L67.6%2C22.8%20L71.3%2C39.9%20L75.0%2C56.9%20L75.0%2C74%20Z%20M71.1%2C74%20L71.1%2C55.1%20L74.7%2C36.1%20L78.3%2C17.2%20L83.2%2C1.1%20L88.0%2C17.2%20L91.7%2C36.1%20L95.3%2C55.1%20L95.3%2C74%20Z%20M89.2%2C74%20L89.2%2C59.0%20L92.6%2C44.1%20L96.0%2C29.1%20L100.5%2C16.5%20L105.0%2C29.1%20L108.4%2C44.1%20L111.8%2C59.0%20L111.8%2C74%20Z%20M102.9%2C74%20L102.9%2C60.0%20L106.1%2C46.0%20L109.4%2C32.1%20L113.7%2C20.2%20L118.1%2C32.1%20L121.3%2C46.0%20L124.6%2C60.0%20L124.6%2C74%20Z%20M121.1%2C74%20C121.1%2C48.7%20124.5%2C14.4%20130.0%2C13.8%20C135.6%2C14.4%20139.0%2C48.7%20139.0%2C74%20Z%20M132.4%2C74%20C132.4%2C45.9%20136.2%2C7.8%20142.4%2C7.1%20C148.6%2C7.8%20152.4%2C45.9%20152.4%2C74%20Z%20M148.5%2C74%20L148.5%2C64.4%20L150.2%2C54.8%20L152.0%2C45.1%20L154.3%2C37.0%20L156.6%2C45.1%20L158.4%2C54.8%20L160.1%2C64.4%20L160.1%2C74%20Z%20M157.0%2C74%20C157.0%2C53.7%20160.0%2C26.2%20165.0%2C25.8%20C170.0%2C26.2%20173.1%2C53.7%20173.1%2C74%20Z%20M164.0%2C74%20C164.0%2C46.5%20168.6%2C9.2%20176.1%2C8.6%20C183.6%2C9.2%20188.2%2C46.5%20188.2%2C74%20Z%20M177.3%2C74%20L177.3%2C56.9%20L181.3%2C39.8%20L185.2%2C22.8%20L190.5%2C8.3%20L195.8%2C22.8%20L199.7%2C39.8%20L203.7%2C56.9%20L203.7%2C74%20Z%20M195.3%2C74%20L195.3%2C59.3%20L199.0%2C44.6%20L202.8%2C29.9%20L207.8%2C17.5%20L212.8%2C29.9%20L216.6%2C44.6%20L220.3%2C59.3%20L220.3%2C74%20Z%20M222.7%2C74%20C222.7%2C56.4%20226.3%2C32.5%20232.3%2C32.0%20C238.2%2C32.5%20241.8%2C56.4%20241.8%2C74%20Z%20M238.6%2C74%20L238.6%2C64.5%20L240.9%2C55.1%20L243.2%2C45.6%20L246.3%2C37.6%20L249.4%2C45.6%20L251.7%2C55.1%20L254.0%2C64.5%20L254.0%2C74%20Z%20M246.5%2C74%20L246.5%2C56.7%20L251.0%2C39.4%20L255.5%2C22.1%20L261.5%2C7.5%20L267.5%2C22.1%20L272.0%2C39.4%20L276.5%2C56.7%20L276.5%2C74%20Z%20M289.6%2C74%20C289.6%2C38.0%20294.5%2C16.3%20294.7%2C1.9%20L296.5%2C1.9%20C296.7%2C16.3%20292.8%2C38.0%20292.8%2C74%20Z%20M295.6%2C1.9%20Q280.9%2C-10.3%20268.8%2C-4.8%20Q280.9%2C-5.7%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q287.6%2C-15.6%20281.1%2C-11.4%20Q287.6%2C-11.4%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q294.4%2C-14.0%20293.4%2C-10.9%20Q294.4%2C-10.7%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q302.4%2C-16.8%20308.0%2C-12.6%20Q302.4%2C-12.5%20295.6%2C3.4%20Z%20M295.6%2C1.9%20Q309.3%2C-10.2%20320.6%2C-5.0%20Q309.3%2C-5.8%20295.6%2C3.4%20Z%20M300.6%2C74%20L300.6%2C62.8%20L302.3%2C51.7%20L304.1%2C40.5%20L306.5%2C31.0%20L308.8%2C40.5%20L310.6%2C51.7%20L312.4%2C62.8%20L312.4%2C74%20Z%20M297.9%2C74%20C297.9%2C44.0%20304.0%2C3.3%20314.0%2C2.6%20C324.0%2C3.3%20330.1%2C44.0%20330.1%2C74%20Z%20M324.9%2C74%20L324.9%2C59.5%20L327.4%2C44.9%20L329.9%2C30.4%20L333.1%2C18.1%20L336.4%2C30.4%20L338.9%2C44.9%20L341.4%2C59.5%20L341.4%2C74%20Z%20M346.6%2C74%20C346.6%2C48.7%20350.1%2C33.4%20350.3%2C23.3%20L352.1%2C23.3%20C352.3%2C33.4%20349.8%2C48.7%20349.8%2C74%20Z%20M351.2%2C23.3%20Q340.9%2C14.7%20332.4%2C18.6%20Q340.9%2C17.9%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q345.6%2C11.0%20341.0%2C13.9%20Q345.6%2C13.9%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q350.4%2C12.1%20349.7%2C14.3%20Q350.4%2C14.5%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q356.0%2C10.1%20360.0%2C13.1%20Q356.0%2C13.1%20351.2%2C24.8%20Z%20M351.2%2C23.3%20Q360.9%2C14.8%20368.8%2C18.5%20Q360.9%2C17.8%20351.2%2C24.8%20Z%20M349.2%2C74%20L349.2%2C61.3%20L352.4%2C48.7%20L355.6%2C36.0%20L359.9%2C25.3%20L364.1%2C36.0%20L367.3%2C48.7%20L370.5%2C61.3%20L370.5%2C74%20Z%20M369.6%2C74%20L369.6%2C57.9%20L372.8%2C41.8%20L376.0%2C25.7%20L380.2%2C12.0%20L384.4%2C25.7%20L387.6%2C41.8%20L390.8%2C57.9%20L390.8%2C74%20Z%20M390.5%2C74%20C390.5%2C48.7%20394.1%2C14.5%20399.8%2C13.9%20C405.5%2C14.5%20409.0%2C48.7%20409.0%2C74%20Z%20M401.3%2C74%20L401.3%2C57.0%20L404.9%2C40.1%20L408.5%2C23.1%20L413.4%2C8.8%20L418.2%2C23.1%20L421.8%2C40.1%20L425.5%2C57.0%20L425.5%2C74%20Z%20M428.0%2C74%20L428.0%2C63.7%20L430.3%2C53.4%20L432.6%2C43.0%20L435.7%2C34.3%20L438.8%2C43.0%20L441.1%2C53.4%20L443.4%2C63.7%20L443.4%2C74%20Z%20M446.4%2C74%20C446.4%2C36.1%20451.4%2C13.4%20451.6%2C-1.8%20L453.4%2C-1.8%20C453.6%2C13.4%20449.6%2C36.1%20449.6%2C74%20Z%20M452.5%2C-1.8%20Q437.1%2C-14.7%20424.4%2C-8.8%20Q437.1%2C-9.8%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q444.1%2C-20.2%20437.3%2C-15.8%20Q444.1%2C-15.9%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q451.3%2C-18.5%20450.2%2C-15.2%20Q451.3%2C-15.0%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q459.7%2C-21.5%20465.6%2C-17.1%20Q459.7%2C-17.0%20452.5%2C-0.3%20Z%20M452.5%2C-1.8%20Q467.0%2C-14.6%20478.8%2C-9.0%20Q467.0%2C-10.0%20452.5%2C-0.3%20Z%20M449.7%2C74%20C449.7%2C50.0%20453.7%2C17.4%20460.2%2C16.9%20C466.7%2C17.4%20470.7%2C50.0%20470.7%2C74%20Z%20M467.7%2C74%20L467.7%2C60.1%20L470.5%2C46.1%20L473.3%2C32.2%20L477.1%2C20.4%20L480.8%2C32.2%20L483.6%2C46.1%20L486.5%2C60.1%20L486.5%2C74%20Z%20M477.0%2C74%20C477.0%2C53.0%20480.9%2C24.5%20487.4%2C24.0%20C493.9%2C24.5%20497.8%2C53.0%20497.8%2C74%20Z%20M498.4%2C74%20C498.4%2C55.8%20501.7%2C31.1%20507.0%2C30.6%20C512.4%2C31.1%20515.6%2C55.8%20515.6%2C74%20Z%20M512.8%2C74%20L512.8%2C60.5%20L514.9%2C47.1%20L517.1%2C33.6%20L519.9%2C22.2%20L522.8%2C33.6%20L524.9%2C47.1%20L527.1%2C60.5%20L527.1%2C74%20Z%20M504.0%2C74%20L504.0%2C55.5%20L508.8%2C37.0%20L513.6%2C18.5%20L520.0%2C2.9%20L526.4%2C18.5%20L531.2%2C37.0%20L536.0%2C55.5%20L536.0%2C74%20Z%20M528.7%2C74%20L528.7%2C58.8%20L531.7%2C43.7%20L534.7%2C28.5%20L538.7%2C15.7%20L542.8%2C28.5%20L545.8%2C43.7%20L548.8%2C58.8%20L548.8%2C74%20Z%20M0%2C72%20L520%2C72%20L520%2C74%20L0%2C74%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: auto 42px; mask-size: auto 42px;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: 0 bottom; mask-position: 0 bottom;
    opacity: .85;
}

.tp-mata-perto {
    background: #101827;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22680%22%20height%3D%22104%22%20viewBox%3D%220%200%20680%20104%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-12.9%2C104%20L-12.9%2C82.9%20L-9.0%2C61.8%20L-5.1%2C40.8%20L0.0%2C22.9%20L5.1%2C40.8%20L9.0%2C61.8%20L12.9%2C82.9%20L12.9%2C104%20Z%20M12.0%2C104%20C12.0%2C67.6%2017.2%2C18.1%2025.5%2C17.2%20C33.9%2C18.1%2039.0%2C67.6%2039.0%2C104%20Z%20M44.5%2C104%20C44.5%2C74.8%2048.0%2C35.2%2053.5%2C34.5%20C59.1%2C35.2%2062.5%2C74.8%2062.5%2C104%20Z%20M76.8%2C104%20C76.8%2C56.0%2083.1%2C27.2%2083.3%2C8.1%20L85.1%2C8.1%20C85.3%2C27.2%2080.0%2C56.0%2080.0%2C104%20Z%20M84.2%2C8.1%20Q64.6%2C-8.3%2048.6%2C-0.9%20Q64.6%2C-2.2%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q73.6%2C-15.3%2064.9%2C-9.7%20Q73.6%2C-9.8%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q82.6%2C-13.1%2081.3%2C-9.0%20Q82.6%2C-8.7%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q93.3%2C-16.9%20100.8%2C-11.3%20Q93.3%2C-11.2%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q102.5%2C-8.1%20117.5%2C-1.1%20Q102.5%2C-2.3%2084.2%2C9.6%20Z%20M104.9%2C104%20L104.9%2C80.9%20L108.7%2C57.9%20L112.4%2C34.8%20L117.4%2C15.3%20L122.4%2C34.8%20L126.1%2C57.9%20L129.9%2C80.9%20L129.9%2C104%20Z%20M129.8%2C104%20L129.8%2C77.3%20L133.6%2C50.7%20L137.4%2C24.0%20L142.4%2C1.5%20L147.4%2C24.0%20L151.2%2C50.7%20L155.0%2C77.3%20L155.0%2C104%20Z%20M157.6%2C104%20L157.6%2C80.6%20L162.2%2C57.3%20L166.8%2C33.9%20L172.9%2C14.1%20L179.0%2C33.9%20L183.6%2C57.3%20L188.2%2C80.6%20L188.2%2C104%20Z%20M181.3%2C104%20C181.3%2C62.7%20188.9%2C6.6%20201.2%2C5.6%20C213.6%2C6.6%20221.1%2C62.7%20221.1%2C104%20Z%20M227.8%2C104%20L227.8%2C82.8%20L231.6%2C61.6%20L235.4%2C40.5%20L240.4%2C22.5%20L245.5%2C40.5%20L249.2%2C61.6%20L253.0%2C82.8%20L253.0%2C104%20Z%20M262.3%2C104%20C262.3%2C52.7%20269.0%2C21.9%20269.2%2C1.4%20L271.0%2C1.4%20C271.2%2C21.9%20265.5%2C52.7%20265.5%2C104%20Z%20M270.1%2C1.4%20Q249.2%2C-16.1%20232.0%2C-8.1%20Q249.2%2C-9.5%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q258.7%2C-23.5%20249.4%2C-17.6%20Q258.7%2C-17.6%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q268.4%2C-21.2%20267.0%2C-16.8%20Q268.4%2C-16.5%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q279.8%2C-25.2%20287.8%2C-19.2%20Q279.8%2C-19.2%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q289.7%2C-15.9%20305.7%2C-8.4%20Q289.7%2C-9.6%20270.1%2C2.9%20Z%20M297.5%2C104%20L297.5%2C84.1%20L301.8%2C64.3%20L306.1%2C44.4%20L311.8%2C27.6%20L317.5%2C44.4%20L321.8%2C64.3%20L326.1%2C84.1%20L326.1%2C104%20Z%20M331.4%2C104%20L331.4%2C79.9%20L335.4%2C55.9%20L339.5%2C31.8%20L344.8%2C11.5%20L350.2%2C31.8%20L354.3%2C55.9%20L358.3%2C79.9%20L358.3%2C104%20Z%20M357.1%2C104%20L357.1%2C81.0%20L360.9%2C58.1%20L364.7%2C35.1%20L369.8%2C15.7%20L374.9%2C35.1%20L378.7%2C58.1%20L382.5%2C81.0%20L382.5%2C104%20Z%20M374.9%2C104%20C374.9%2C70.5%20380.6%2C25.1%20390.0%2C24.3%20C399.4%2C25.1%20405.2%2C70.5%20405.2%2C104%20Z%20M410.6%2C104%20L410.6%2C78.8%20L415.7%2C53.6%20L420.7%2C28.4%20L427.5%2C7.1%20L434.3%2C28.4%20L439.4%2C53.6%20L444.4%2C78.8%20L444.4%2C104%20Z%20M456.5%2C104%20C456.5%2C55.9%20462.8%2C27.1%20463.0%2C7.9%20L464.8%2C7.9%20C465.0%2C27.1%20459.7%2C55.9%20459.7%2C104%20Z%20M463.9%2C7.9%20Q444.3%2C-8.5%20428.2%2C-1.0%20Q444.3%2C-2.3%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q453.2%2C-15.5%20444.5%2C-9.9%20Q453.2%2C-10.0%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q462.3%2C-13.3%20461.0%2C-9.2%20Q462.3%2C-8.9%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q473.0%2C-17.1%20480.5%2C-11.5%20Q473.0%2C-11.4%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q482.2%2C-8.3%20497.2%2C-1.3%20Q482.2%2C-2.5%20463.9%2C9.4%20Z%20M480.5%2C104%20L480.5%2C82.1%20L485.8%2C60.1%20L491.1%2C38.2%20L498.1%2C19.7%20L505.1%2C38.2%20L510.4%2C60.1%20L515.7%2C82.1%20L515.7%2C104%20Z%20M532.9%2C104%20L532.9%2C85.4%20L536.0%2C66.8%20L539.1%2C48.2%20L543.2%2C32.4%20L547.4%2C48.2%20L550.5%2C66.8%20L553.5%2C85.4%20L553.5%2C104%20Z%20M564.7%2C104%20C564.7%2C50.1%20571.7%2C17.7%20571.9%2C-3.9%20L573.7%2C-3.9%20C573.9%2C17.7%20567.9%2C50.1%20567.9%2C104%20Z%20M572.8%2C-3.9%20Q550.8%2C-22.2%20532.8%2C-13.9%20Q550.8%2C-15.3%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q560.9%2C-30.1%20551.1%2C-23.8%20Q560.9%2C-23.9%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q571.0%2C-27.7%20569.6%2C-23.0%20Q571.0%2C-22.7%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q583.0%2C-31.9%20591.4%2C-25.6%20Q583.0%2C-25.5%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q593.4%2C-22.0%20610.2%2C-14.2%20Q593.4%2C-15.5%20572.8%2C-2.4%20Z%20M576.8%2C104%20L576.8%2C83.7%20L581.0%2C63.4%20L585.1%2C43.2%20L590.7%2C26.0%20L596.2%2C43.2%20L600.4%2C63.4%20L604.6%2C83.7%20L604.6%2C104%20Z%20M608.4%2C104%20L608.4%2C81.8%20L613.1%2C59.6%20L617.8%2C37.4%20L624.0%2C18.7%20L630.3%2C37.4%20L635.0%2C59.6%20L639.7%2C81.8%20L639.7%2C104%20Z%20M644.7%2C104%20L644.7%2C85.9%20L647.7%2C67.9%20L650.6%2C49.8%20L654.6%2C34.6%20L658.5%2C49.8%20L661.4%2C67.9%20L664.4%2C85.9%20L664.4%2C104%20Z%20M667.1%2C104%20L667.1%2C82.9%20L671.0%2C61.8%20L674.9%2C40.8%20L680.0%2C22.9%20L685.1%2C40.8%20L689.0%2C61.8%20L692.9%2C82.9%20L692.9%2C104%20Z%20M692.0%2C104%20C692.0%2C67.6%20697.2%2C18.1%20705.5%2C17.2%20C713.9%2C18.1%20719.0%2C67.6%20719.0%2C104%20Z%20M0%2C102%20L680%2C102%20L680%2C104%20L0%2C104%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22680%22%20height%3D%22104%22%20viewBox%3D%220%200%20680%20104%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-12.9%2C104%20L-12.9%2C82.9%20L-9.0%2C61.8%20L-5.1%2C40.8%20L0.0%2C22.9%20L5.1%2C40.8%20L9.0%2C61.8%20L12.9%2C82.9%20L12.9%2C104%20Z%20M12.0%2C104%20C12.0%2C67.6%2017.2%2C18.1%2025.5%2C17.2%20C33.9%2C18.1%2039.0%2C67.6%2039.0%2C104%20Z%20M44.5%2C104%20C44.5%2C74.8%2048.0%2C35.2%2053.5%2C34.5%20C59.1%2C35.2%2062.5%2C74.8%2062.5%2C104%20Z%20M76.8%2C104%20C76.8%2C56.0%2083.1%2C27.2%2083.3%2C8.1%20L85.1%2C8.1%20C85.3%2C27.2%2080.0%2C56.0%2080.0%2C104%20Z%20M84.2%2C8.1%20Q64.6%2C-8.3%2048.6%2C-0.9%20Q64.6%2C-2.2%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q73.6%2C-15.3%2064.9%2C-9.7%20Q73.6%2C-9.8%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q82.6%2C-13.1%2081.3%2C-9.0%20Q82.6%2C-8.7%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q93.3%2C-16.9%20100.8%2C-11.3%20Q93.3%2C-11.2%2084.2%2C9.6%20Z%20M84.2%2C8.1%20Q102.5%2C-8.1%20117.5%2C-1.1%20Q102.5%2C-2.3%2084.2%2C9.6%20Z%20M104.9%2C104%20L104.9%2C80.9%20L108.7%2C57.9%20L112.4%2C34.8%20L117.4%2C15.3%20L122.4%2C34.8%20L126.1%2C57.9%20L129.9%2C80.9%20L129.9%2C104%20Z%20M129.8%2C104%20L129.8%2C77.3%20L133.6%2C50.7%20L137.4%2C24.0%20L142.4%2C1.5%20L147.4%2C24.0%20L151.2%2C50.7%20L155.0%2C77.3%20L155.0%2C104%20Z%20M157.6%2C104%20L157.6%2C80.6%20L162.2%2C57.3%20L166.8%2C33.9%20L172.9%2C14.1%20L179.0%2C33.9%20L183.6%2C57.3%20L188.2%2C80.6%20L188.2%2C104%20Z%20M181.3%2C104%20C181.3%2C62.7%20188.9%2C6.6%20201.2%2C5.6%20C213.6%2C6.6%20221.1%2C62.7%20221.1%2C104%20Z%20M227.8%2C104%20L227.8%2C82.8%20L231.6%2C61.6%20L235.4%2C40.5%20L240.4%2C22.5%20L245.5%2C40.5%20L249.2%2C61.6%20L253.0%2C82.8%20L253.0%2C104%20Z%20M262.3%2C104%20C262.3%2C52.7%20269.0%2C21.9%20269.2%2C1.4%20L271.0%2C1.4%20C271.2%2C21.9%20265.5%2C52.7%20265.5%2C104%20Z%20M270.1%2C1.4%20Q249.2%2C-16.1%20232.0%2C-8.1%20Q249.2%2C-9.5%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q258.7%2C-23.5%20249.4%2C-17.6%20Q258.7%2C-17.6%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q268.4%2C-21.2%20267.0%2C-16.8%20Q268.4%2C-16.5%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q279.8%2C-25.2%20287.8%2C-19.2%20Q279.8%2C-19.2%20270.1%2C2.9%20Z%20M270.1%2C1.4%20Q289.7%2C-15.9%20305.7%2C-8.4%20Q289.7%2C-9.6%20270.1%2C2.9%20Z%20M297.5%2C104%20L297.5%2C84.1%20L301.8%2C64.3%20L306.1%2C44.4%20L311.8%2C27.6%20L317.5%2C44.4%20L321.8%2C64.3%20L326.1%2C84.1%20L326.1%2C104%20Z%20M331.4%2C104%20L331.4%2C79.9%20L335.4%2C55.9%20L339.5%2C31.8%20L344.8%2C11.5%20L350.2%2C31.8%20L354.3%2C55.9%20L358.3%2C79.9%20L358.3%2C104%20Z%20M357.1%2C104%20L357.1%2C81.0%20L360.9%2C58.1%20L364.7%2C35.1%20L369.8%2C15.7%20L374.9%2C35.1%20L378.7%2C58.1%20L382.5%2C81.0%20L382.5%2C104%20Z%20M374.9%2C104%20C374.9%2C70.5%20380.6%2C25.1%20390.0%2C24.3%20C399.4%2C25.1%20405.2%2C70.5%20405.2%2C104%20Z%20M410.6%2C104%20L410.6%2C78.8%20L415.7%2C53.6%20L420.7%2C28.4%20L427.5%2C7.1%20L434.3%2C28.4%20L439.4%2C53.6%20L444.4%2C78.8%20L444.4%2C104%20Z%20M456.5%2C104%20C456.5%2C55.9%20462.8%2C27.1%20463.0%2C7.9%20L464.8%2C7.9%20C465.0%2C27.1%20459.7%2C55.9%20459.7%2C104%20Z%20M463.9%2C7.9%20Q444.3%2C-8.5%20428.2%2C-1.0%20Q444.3%2C-2.3%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q453.2%2C-15.5%20444.5%2C-9.9%20Q453.2%2C-10.0%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q462.3%2C-13.3%20461.0%2C-9.2%20Q462.3%2C-8.9%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q473.0%2C-17.1%20480.5%2C-11.5%20Q473.0%2C-11.4%20463.9%2C9.4%20Z%20M463.9%2C7.9%20Q482.2%2C-8.3%20497.2%2C-1.3%20Q482.2%2C-2.5%20463.9%2C9.4%20Z%20M480.5%2C104%20L480.5%2C82.1%20L485.8%2C60.1%20L491.1%2C38.2%20L498.1%2C19.7%20L505.1%2C38.2%20L510.4%2C60.1%20L515.7%2C82.1%20L515.7%2C104%20Z%20M532.9%2C104%20L532.9%2C85.4%20L536.0%2C66.8%20L539.1%2C48.2%20L543.2%2C32.4%20L547.4%2C48.2%20L550.5%2C66.8%20L553.5%2C85.4%20L553.5%2C104%20Z%20M564.7%2C104%20C564.7%2C50.1%20571.7%2C17.7%20571.9%2C-3.9%20L573.7%2C-3.9%20C573.9%2C17.7%20567.9%2C50.1%20567.9%2C104%20Z%20M572.8%2C-3.9%20Q550.8%2C-22.2%20532.8%2C-13.9%20Q550.8%2C-15.3%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q560.9%2C-30.1%20551.1%2C-23.8%20Q560.9%2C-23.9%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q571.0%2C-27.7%20569.6%2C-23.0%20Q571.0%2C-22.7%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q583.0%2C-31.9%20591.4%2C-25.6%20Q583.0%2C-25.5%20572.8%2C-2.4%20Z%20M572.8%2C-3.9%20Q593.4%2C-22.0%20610.2%2C-14.2%20Q593.4%2C-15.5%20572.8%2C-2.4%20Z%20M576.8%2C104%20L576.8%2C83.7%20L581.0%2C63.4%20L585.1%2C43.2%20L590.7%2C26.0%20L596.2%2C43.2%20L600.4%2C63.4%20L604.6%2C83.7%20L604.6%2C104%20Z%20M608.4%2C104%20L608.4%2C81.8%20L613.1%2C59.6%20L617.8%2C37.4%20L624.0%2C18.7%20L630.3%2C37.4%20L635.0%2C59.6%20L639.7%2C81.8%20L639.7%2C104%20Z%20M644.7%2C104%20L644.7%2C85.9%20L647.7%2C67.9%20L650.6%2C49.8%20L654.6%2C34.6%20L658.5%2C49.8%20L661.4%2C67.9%20L664.4%2C85.9%20L664.4%2C104%20Z%20M667.1%2C104%20L667.1%2C82.9%20L671.0%2C61.8%20L674.9%2C40.8%20L680.0%2C22.9%20L685.1%2C40.8%20L689.0%2C61.8%20L692.9%2C82.9%20L692.9%2C104%20Z%20M692.0%2C104%20C692.0%2C67.6%20697.2%2C18.1%20705.5%2C17.2%20C713.9%2C18.1%20719.0%2C67.6%20719.0%2C104%20Z%20M0%2C102%20L680%2C102%20L680%2C104%20L0%2C104%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: auto 62px; mask-size: auto 62px;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: 0 bottom; mask-position: 0 bottom;
}

.tp-capim {
    background: #0c1320;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%2234%22%20viewBox%3D%220%200%20300%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-3.9%2C34%20Q-1.6%2C21.4%20-7.1%2C11.0%20Q2.0%2C22.5%203.9%2C34%20Z%20M-2.4%2C34%20Q0.7%2C17.5%20-6.5%2C4.0%20Q5.2%2C19.0%207.8%2C34%20Z%20M2.4%2C34%20Q4.3%2C23.8%20-1.6%2C15.4%20Q7.1%2C24.7%208.7%2C34%20Z%20M5.9%2C34%20Q8.5%2C19.5%2022.7%2C7.7%20Q12.6%2C20.9%2014.8%2C34%20Z%20M10.2%2C34%20Q12.3%2C22.8%2022.2%2C13.6%20Q15.4%2C23.8%2017.1%2C34%20Z%20M12.5%2C34%20Q15.2%2C19.0%208.2%2C6.8%20Q19.4%2C20.4%2021.7%2C34%20Z%20M17.7%2C34%20Q20.3%2C20.3%208.4%2C9.0%20Q24.1%2C21.5%2026.2%2C34%20Z%20M22.6%2C34%20Q24.8%2C22.0%2020.4%2C12.2%20Q28.1%2C23.1%2030.0%2C34%20Z%20M25.6%2C34%20Q28.9%2C16.4%2041.2%2C2.1%20Q33.8%2C18.0%2036.5%2C34%20Z%20M29.3%2C34%20Q31.7%2C21.1%2038.7%2C10.6%20Q35.3%2C22.3%2037.3%2C34%20Z%20M32.6%2C34%20Q34.5%2C23.4%2028.9%2C14.7%20Q37.5%2C24.4%2039.1%2C34%20Z%20M35.0%2C34%20Q37.8%2C19.2%2048.2%2C7.1%20Q41.9%2C20.5%2044.2%2C34%20Z%20M38.3%2C34%20Q40.6%2C21.6%2035.9%2C11.4%20Q44.0%2C22.7%2046.0%2C34%20Z%20M41.2%2C34%20Q43.9%2C19.4%2052.4%2C7.4%20Q48.0%2C20.7%2050.3%2C34%20Z%20M45.6%2C34%20Q48.4%2C18.7%2062.9%2C6.1%20Q52.7%2C20.1%2055.1%2C34%20Z%20M52.2%2C34%20Q54.0%2C24.0%2049.9%2C15.7%20Q56.8%2C24.9%2058.4%2C34%20Z%20M53.2%2C34%20Q56.4%2C16.7%2075.3%2C2.6%20Q61.2%2C18.3%2063.9%2C34%20Z%20M58.2%2C34%20Q60.2%2C23.0%2053.9%2C14.0%20Q63.3%2C24.0%2065.0%2C34%20Z%20M61.9%2C34%20Q63.9%2C23.1%2059.5%2C14.2%20Q67.0%2C24.1%2068.6%2C34%20Z%20M65.7%2C34%20Q68.0%2C21.8%2077.5%2C11.8%20Q71.4%2C22.9%2073.3%2C34%20Z%20M68.5%2C34%20Q70.9%2C20.9%2082.6%2C10.2%20Q74.5%2C22.1%2076.6%2C34%20Z%20M71.0%2C34%20Q74.3%2C16.2%2059.1%2C1.7%20Q79.2%2C17.8%2082.0%2C34%20Z%20M75.7%2C34%20Q78.3%2C20.2%2091.2%2C8.9%20Q82.1%2C21.5%2084.2%2C34%20Z%20M78.1%2C34%20Q80.7%2C20.5%2089.8%2C9.4%20Q84.4%2C21.7%2086.5%2C34%20Z%20M81.5%2C34%20Q84.5%2C18.1%2099.3%2C5.1%20Q88.9%2C19.5%2091.4%2C34%20Z%20M86.5%2C34%20Q88.8%2C21.2%2095.9%2C10.7%20Q92.4%2C22.4%2094.4%2C34%20Z%20M89.3%2C34%20Q92.0%2C19.2%20102.5%2C7.1%20Q96.1%2C20.5%2098.4%2C34%20Z%20M93.9%2C34%20Q96.6%2C19.5%20110.4%2C7.7%20Q100.6%2C20.8%20102.9%2C34%20Z%20M97.4%2C34%20Q100.6%2C16.8%20112.8%2C2.8%20Q105.3%2C18.4%20108.0%2C34%20Z%20M103.3%2C34%20Q105.5%2C22.0%2098.2%2C12.2%20Q108.9%2C23.1%20110.7%2C34%20Z%20M108.0%2C34%20Q109.9%2C23.6%20118.4%2C15.1%20Q112.8%2C24.6%20114.4%2C34%20Z%20M109.4%2C34%20Q112.7%2C16.1%20126.3%2C1.5%20Q117.7%2C17.7%20120.4%2C34%20Z%20M114.2%2C34%20Q116.8%2C19.8%20107.6%2C8.2%20Q120.7%2C21.1%20122.9%2C34%20Z%20M116.6%2C34%20Q119.3%2C19.2%20129.2%2C7.1%20Q123.4%2C20.5%20125.7%2C34%20Z%20M122.0%2C34%20Q124.0%2C22.8%20135.0%2C13.5%20Q127.2%2C23.8%20128.9%2C34%20Z%20M125.8%2C34%20Q127.6%2C24.2%20124.1%2C16.1%20Q130.3%2C25.1%20131.8%2C34%20Z%20M128.6%2C34%20Q131.5%2C18.5%20118.2%2C5.8%20Q135.8%2C19.9%20138.2%2C34%20Z%20M134.1%2C34%20Q136.0%2C24.2%20131.1%2C16.2%20Q138.7%2C25.1%20140.2%2C34%20Z%20M135.9%2C34%20Q138.7%2C18.6%20152.0%2C6.0%20Q143.0%2C20.0%20145.4%2C34%20Z%20M138.4%2C34%20Q141.7%2C16.2%20129.2%2C1.6%20Q146.6%2C17.8%20149.4%2C34%20Z%20M143.5%2C34%20Q145.7%2C21.8%20154.3%2C11.8%20Q149.1%2C22.9%20151.0%2C34%20Z%20M144.3%2C34%20Q147.5%2C16.6%20164.7%2C2.4%20Q152.3%2C18.2%20155.0%2C34%20Z%20M149.4%2C34%20Q152.3%2C18.5%20167.5%2C5.8%20Q156.6%2C19.9%20159.0%2C34%20Z%20M152.9%2C34%20Q155.1%2C22.0%20149.3%2C12.1%20Q158.4%2C23.1%20160.3%2C34%20Z%20M156.3%2C34%20Q158.6%2C21.5%20170.6%2C11.3%20Q162.1%2C22.7%20164.0%2C34%20Z%20M160.7%2C34%20Q162.7%2C23.7%20156.6%2C15.2%20Q165.5%2C24.6%20167.1%2C34%20Z%20M163.7%2C34%20Q166.7%2C17.6%20180.8%2C4.2%20Q171.3%2C19.1%20173.8%2C34%20Z%20M167.5%2C34%20Q169.8%2C21.7%20182.2%2C11.6%20Q173.2%2C22.8%20175.1%2C34%20Z%20M172.0%2C34%20Q174.8%2C19.1%20186.9%2C7.0%20Q178.9%2C20.5%20181.2%2C34%20Z%20M174.8%2C34%20Q178.2%2C15.8%20197.6%2C0.9%20Q183.3%2C17.4%20186.1%2C34%20Z%20M178.7%2C34%20Q181.5%2C18.5%20175.7%2C5.8%20Q185.9%2C19.9%20188.3%2C34%20Z%20M183.7%2C34%20Q185.6%2C23.5%20179.3%2C14.9%20Q188.5%2C24.4%20190.2%2C34%20Z%20M185.7%2C34%20Q188.2%2C20.5%20176.9%2C9.4%20Q192.0%2C21.7%20194.1%2C34%20Z%20M189.0%2C34%20Q191.1%2C22.8%20186.8%2C13.6%20Q194.2%2C23.8%20196.0%2C34%20Z%20M191.9%2C34%20Q194.8%2C18.8%20182.8%2C6.3%20Q199.0%2C20.2%20201.3%2C34%20Z%20M194.8%2C34%20Q197.9%2C17.4%20207.1%2C3.7%20Q202.5%2C18.9%20205.1%2C34%20Z%20M197.5%2C34%20Q200.7%2C17.2%20188.1%2C3.4%20Q205.3%2C18.7%20208.0%2C34%20Z%20M201.6%2C34%20Q204.4%2C19.3%20214.2%2C7.2%20Q208.5%2C20.6%20210.7%2C34%20Z%20M204.1%2C34%20Q207.1%2C17.7%20221.3%2C4.3%20Q211.6%2C19.2%20214.2%2C34%20Z%20M207.7%2C34%20Q210.1%2C21.3%20202.1%2C10.9%20Q213.6%2C22.4%20215.6%2C34%20Z%20M211.2%2C34%20Q213.2%2C22.8%20220.3%2C13.6%20Q216.3%2C23.8%20218.1%2C34%20Z%20M214.4%2C34%20Q216.9%2C20.3%20230.9%2C9.2%20Q220.7%2C21.6%20222.8%2C34%20Z%20M219.2%2C34%20Q221.8%2C19.7%20229.9%2C8.0%20Q225.8%2C21.0%20228.0%2C34%20Z%20M222.4%2C34%20Q224.5%2C22.7%20236.3%2C13.4%20Q227.7%2C23.7%20229.4%2C34%20Z%20M226.2%2C34%20Q228.6%2C21.0%20240.5%2C10.3%20Q232.3%2C22.2%20234.3%2C34%20Z%20M227.3%2C34%20Q230.7%2C15.7%20240.7%2C0.7%20Q235.8%2C17.3%20238.7%2C34%20Z%20M232.3%2C34%20Q234.5%2C21.8%20247.5%2C11.8%20Q237.9%2C22.9%20239.8%2C34%20Z%20M237.0%2C34%20Q239.6%2C20.4%20248.3%2C9.3%20Q243.3%2C21.7%20245.4%2C34%20Z%20M238.8%2C34%20Q241.6%2C18.6%20229.2%2C5.9%20Q245.9%2C20.0%20248.3%2C34%20Z%20M244.2%2C34%20Q246.9%2C19.4%20238.7%2C7.5%20Q250.9%2C20.8%20253.2%2C34%20Z%20M246.7%2C34%20Q250.0%2C15.7%20239.3%2C0.7%20Q255.1%2C17.4%20258.0%2C34%20Z%20M251.8%2C34%20Q254.3%2C20.5%20249.9%2C9.4%20Q258.0%2C21.7%20260.1%2C34%20Z%20M256.6%2C34%20Q259.0%2C20.9%20252.9%2C10.3%20Q262.7%2C22.1%20264.7%2C34%20Z%20M262.7%2C34%20Q264.7%2C23.4%20261.2%2C14.6%20Q267.7%2C24.3%20269.3%2C34%20Z%20M264.7%2C34%20Q267.0%2C21.6%20279.7%2C11.4%20Q270.5%2C22.7%20272.4%2C34%20Z%20M267.6%2C34%20Q269.8%2C22.1%20263.0%2C12.3%20Q273.1%2C23.1%20274.9%2C34%20Z%20M271.1%2C34%20Q273.0%2C24.1%20269.1%2C15.9%20Q275.8%2C25.0%20277.3%2C34%20Z%20M273.2%2C34%20Q276.0%2C19.3%20265.4%2C7.3%20Q280.1%2C20.6%20282.3%2C34%20Z%20M276.7%2C34%20Q280.2%2C15.5%20265.4%2C0.3%20Q285.3%2C17.1%20288.2%2C34%20Z%20M280.4%2C34%20Q283.5%2C17.1%20272.5%2C3.2%20Q288.2%2C18.6%20290.9%2C34%20Z%20M284.4%2C34%20Q287.5%2C17.5%20282.1%2C4.1%20Q292.1%2C19.0%20294.6%2C34%20Z%20M287.8%2C34%20Q290.8%2C17.6%20282.7%2C4.2%20Q295.4%2C19.1%20297.9%2C34%20Z%20M293.5%2C34%20Q296.1%2C19.7%20305.0%2C8.1%20Q300.1%2C21.0%20302.3%2C34%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%2234%22%20viewBox%3D%220%200%20300%2034%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M-3.9%2C34%20Q-1.6%2C21.4%20-7.1%2C11.0%20Q2.0%2C22.5%203.9%2C34%20Z%20M-2.4%2C34%20Q0.7%2C17.5%20-6.5%2C4.0%20Q5.2%2C19.0%207.8%2C34%20Z%20M2.4%2C34%20Q4.3%2C23.8%20-1.6%2C15.4%20Q7.1%2C24.7%208.7%2C34%20Z%20M5.9%2C34%20Q8.5%2C19.5%2022.7%2C7.7%20Q12.6%2C20.9%2014.8%2C34%20Z%20M10.2%2C34%20Q12.3%2C22.8%2022.2%2C13.6%20Q15.4%2C23.8%2017.1%2C34%20Z%20M12.5%2C34%20Q15.2%2C19.0%208.2%2C6.8%20Q19.4%2C20.4%2021.7%2C34%20Z%20M17.7%2C34%20Q20.3%2C20.3%208.4%2C9.0%20Q24.1%2C21.5%2026.2%2C34%20Z%20M22.6%2C34%20Q24.8%2C22.0%2020.4%2C12.2%20Q28.1%2C23.1%2030.0%2C34%20Z%20M25.6%2C34%20Q28.9%2C16.4%2041.2%2C2.1%20Q33.8%2C18.0%2036.5%2C34%20Z%20M29.3%2C34%20Q31.7%2C21.1%2038.7%2C10.6%20Q35.3%2C22.3%2037.3%2C34%20Z%20M32.6%2C34%20Q34.5%2C23.4%2028.9%2C14.7%20Q37.5%2C24.4%2039.1%2C34%20Z%20M35.0%2C34%20Q37.8%2C19.2%2048.2%2C7.1%20Q41.9%2C20.5%2044.2%2C34%20Z%20M38.3%2C34%20Q40.6%2C21.6%2035.9%2C11.4%20Q44.0%2C22.7%2046.0%2C34%20Z%20M41.2%2C34%20Q43.9%2C19.4%2052.4%2C7.4%20Q48.0%2C20.7%2050.3%2C34%20Z%20M45.6%2C34%20Q48.4%2C18.7%2062.9%2C6.1%20Q52.7%2C20.1%2055.1%2C34%20Z%20M52.2%2C34%20Q54.0%2C24.0%2049.9%2C15.7%20Q56.8%2C24.9%2058.4%2C34%20Z%20M53.2%2C34%20Q56.4%2C16.7%2075.3%2C2.6%20Q61.2%2C18.3%2063.9%2C34%20Z%20M58.2%2C34%20Q60.2%2C23.0%2053.9%2C14.0%20Q63.3%2C24.0%2065.0%2C34%20Z%20M61.9%2C34%20Q63.9%2C23.1%2059.5%2C14.2%20Q67.0%2C24.1%2068.6%2C34%20Z%20M65.7%2C34%20Q68.0%2C21.8%2077.5%2C11.8%20Q71.4%2C22.9%2073.3%2C34%20Z%20M68.5%2C34%20Q70.9%2C20.9%2082.6%2C10.2%20Q74.5%2C22.1%2076.6%2C34%20Z%20M71.0%2C34%20Q74.3%2C16.2%2059.1%2C1.7%20Q79.2%2C17.8%2082.0%2C34%20Z%20M75.7%2C34%20Q78.3%2C20.2%2091.2%2C8.9%20Q82.1%2C21.5%2084.2%2C34%20Z%20M78.1%2C34%20Q80.7%2C20.5%2089.8%2C9.4%20Q84.4%2C21.7%2086.5%2C34%20Z%20M81.5%2C34%20Q84.5%2C18.1%2099.3%2C5.1%20Q88.9%2C19.5%2091.4%2C34%20Z%20M86.5%2C34%20Q88.8%2C21.2%2095.9%2C10.7%20Q92.4%2C22.4%2094.4%2C34%20Z%20M89.3%2C34%20Q92.0%2C19.2%20102.5%2C7.1%20Q96.1%2C20.5%2098.4%2C34%20Z%20M93.9%2C34%20Q96.6%2C19.5%20110.4%2C7.7%20Q100.6%2C20.8%20102.9%2C34%20Z%20M97.4%2C34%20Q100.6%2C16.8%20112.8%2C2.8%20Q105.3%2C18.4%20108.0%2C34%20Z%20M103.3%2C34%20Q105.5%2C22.0%2098.2%2C12.2%20Q108.9%2C23.1%20110.7%2C34%20Z%20M108.0%2C34%20Q109.9%2C23.6%20118.4%2C15.1%20Q112.8%2C24.6%20114.4%2C34%20Z%20M109.4%2C34%20Q112.7%2C16.1%20126.3%2C1.5%20Q117.7%2C17.7%20120.4%2C34%20Z%20M114.2%2C34%20Q116.8%2C19.8%20107.6%2C8.2%20Q120.7%2C21.1%20122.9%2C34%20Z%20M116.6%2C34%20Q119.3%2C19.2%20129.2%2C7.1%20Q123.4%2C20.5%20125.7%2C34%20Z%20M122.0%2C34%20Q124.0%2C22.8%20135.0%2C13.5%20Q127.2%2C23.8%20128.9%2C34%20Z%20M125.8%2C34%20Q127.6%2C24.2%20124.1%2C16.1%20Q130.3%2C25.1%20131.8%2C34%20Z%20M128.6%2C34%20Q131.5%2C18.5%20118.2%2C5.8%20Q135.8%2C19.9%20138.2%2C34%20Z%20M134.1%2C34%20Q136.0%2C24.2%20131.1%2C16.2%20Q138.7%2C25.1%20140.2%2C34%20Z%20M135.9%2C34%20Q138.7%2C18.6%20152.0%2C6.0%20Q143.0%2C20.0%20145.4%2C34%20Z%20M138.4%2C34%20Q141.7%2C16.2%20129.2%2C1.6%20Q146.6%2C17.8%20149.4%2C34%20Z%20M143.5%2C34%20Q145.7%2C21.8%20154.3%2C11.8%20Q149.1%2C22.9%20151.0%2C34%20Z%20M144.3%2C34%20Q147.5%2C16.6%20164.7%2C2.4%20Q152.3%2C18.2%20155.0%2C34%20Z%20M149.4%2C34%20Q152.3%2C18.5%20167.5%2C5.8%20Q156.6%2C19.9%20159.0%2C34%20Z%20M152.9%2C34%20Q155.1%2C22.0%20149.3%2C12.1%20Q158.4%2C23.1%20160.3%2C34%20Z%20M156.3%2C34%20Q158.6%2C21.5%20170.6%2C11.3%20Q162.1%2C22.7%20164.0%2C34%20Z%20M160.7%2C34%20Q162.7%2C23.7%20156.6%2C15.2%20Q165.5%2C24.6%20167.1%2C34%20Z%20M163.7%2C34%20Q166.7%2C17.6%20180.8%2C4.2%20Q171.3%2C19.1%20173.8%2C34%20Z%20M167.5%2C34%20Q169.8%2C21.7%20182.2%2C11.6%20Q173.2%2C22.8%20175.1%2C34%20Z%20M172.0%2C34%20Q174.8%2C19.1%20186.9%2C7.0%20Q178.9%2C20.5%20181.2%2C34%20Z%20M174.8%2C34%20Q178.2%2C15.8%20197.6%2C0.9%20Q183.3%2C17.4%20186.1%2C34%20Z%20M178.7%2C34%20Q181.5%2C18.5%20175.7%2C5.8%20Q185.9%2C19.9%20188.3%2C34%20Z%20M183.7%2C34%20Q185.6%2C23.5%20179.3%2C14.9%20Q188.5%2C24.4%20190.2%2C34%20Z%20M185.7%2C34%20Q188.2%2C20.5%20176.9%2C9.4%20Q192.0%2C21.7%20194.1%2C34%20Z%20M189.0%2C34%20Q191.1%2C22.8%20186.8%2C13.6%20Q194.2%2C23.8%20196.0%2C34%20Z%20M191.9%2C34%20Q194.8%2C18.8%20182.8%2C6.3%20Q199.0%2C20.2%20201.3%2C34%20Z%20M194.8%2C34%20Q197.9%2C17.4%20207.1%2C3.7%20Q202.5%2C18.9%20205.1%2C34%20Z%20M197.5%2C34%20Q200.7%2C17.2%20188.1%2C3.4%20Q205.3%2C18.7%20208.0%2C34%20Z%20M201.6%2C34%20Q204.4%2C19.3%20214.2%2C7.2%20Q208.5%2C20.6%20210.7%2C34%20Z%20M204.1%2C34%20Q207.1%2C17.7%20221.3%2C4.3%20Q211.6%2C19.2%20214.2%2C34%20Z%20M207.7%2C34%20Q210.1%2C21.3%20202.1%2C10.9%20Q213.6%2C22.4%20215.6%2C34%20Z%20M211.2%2C34%20Q213.2%2C22.8%20220.3%2C13.6%20Q216.3%2C23.8%20218.1%2C34%20Z%20M214.4%2C34%20Q216.9%2C20.3%20230.9%2C9.2%20Q220.7%2C21.6%20222.8%2C34%20Z%20M219.2%2C34%20Q221.8%2C19.7%20229.9%2C8.0%20Q225.8%2C21.0%20228.0%2C34%20Z%20M222.4%2C34%20Q224.5%2C22.7%20236.3%2C13.4%20Q227.7%2C23.7%20229.4%2C34%20Z%20M226.2%2C34%20Q228.6%2C21.0%20240.5%2C10.3%20Q232.3%2C22.2%20234.3%2C34%20Z%20M227.3%2C34%20Q230.7%2C15.7%20240.7%2C0.7%20Q235.8%2C17.3%20238.7%2C34%20Z%20M232.3%2C34%20Q234.5%2C21.8%20247.5%2C11.8%20Q237.9%2C22.9%20239.8%2C34%20Z%20M237.0%2C34%20Q239.6%2C20.4%20248.3%2C9.3%20Q243.3%2C21.7%20245.4%2C34%20Z%20M238.8%2C34%20Q241.6%2C18.6%20229.2%2C5.9%20Q245.9%2C20.0%20248.3%2C34%20Z%20M244.2%2C34%20Q246.9%2C19.4%20238.7%2C7.5%20Q250.9%2C20.8%20253.2%2C34%20Z%20M246.7%2C34%20Q250.0%2C15.7%20239.3%2C0.7%20Q255.1%2C17.4%20258.0%2C34%20Z%20M251.8%2C34%20Q254.3%2C20.5%20249.9%2C9.4%20Q258.0%2C21.7%20260.1%2C34%20Z%20M256.6%2C34%20Q259.0%2C20.9%20252.9%2C10.3%20Q262.7%2C22.1%20264.7%2C34%20Z%20M262.7%2C34%20Q264.7%2C23.4%20261.2%2C14.6%20Q267.7%2C24.3%20269.3%2C34%20Z%20M264.7%2C34%20Q267.0%2C21.6%20279.7%2C11.4%20Q270.5%2C22.7%20272.4%2C34%20Z%20M267.6%2C34%20Q269.8%2C22.1%20263.0%2C12.3%20Q273.1%2C23.1%20274.9%2C34%20Z%20M271.1%2C34%20Q273.0%2C24.1%20269.1%2C15.9%20Q275.8%2C25.0%20277.3%2C34%20Z%20M273.2%2C34%20Q276.0%2C19.3%20265.4%2C7.3%20Q280.1%2C20.6%20282.3%2C34%20Z%20M276.7%2C34%20Q280.2%2C15.5%20265.4%2C0.3%20Q285.3%2C17.1%20288.2%2C34%20Z%20M280.4%2C34%20Q283.5%2C17.1%20272.5%2C3.2%20Q288.2%2C18.6%20290.9%2C34%20Z%20M284.4%2C34%20Q287.5%2C17.5%20282.1%2C4.1%20Q292.1%2C19.0%20294.6%2C34%20Z%20M287.8%2C34%20Q290.8%2C17.6%20282.7%2C4.2%20Q295.4%2C19.1%20297.9%2C34%20Z%20M293.5%2C34%20Q296.1%2C19.7%20305.0%2C8.1%20Q300.1%2C21.0%20302.3%2C34%20Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: auto 19px; mask-size: auto 19px;
    -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
    -webkit-mask-position: 0 bottom; mask-position: 0 bottom;
    /* O capim nasce do chão, então balança pelo PÉ: a dobradiça fica
       embaixo. Girar pelo meio faria a folha deslizar no chão. */
    transform-origin: 50% 100%;
    animation: tp-capim-balanca 7s ease-in-out infinite;
}

@keyframes tp-capim-balanca {
    0%, 100% { transform: skewX(0deg); }
    50%       { transform: skewX(-2.2deg); }
}

/* ---------- a neblina ----------
   A única coisa da paisagem que anda, e anda porque neblina anda
   mesmo. Duas faixas em velocidades diferentes, uma em cada sentido:
   é o que impede o olho de achar o laço. */
.tp-neblina {
    bottom: calc(100% - var(--tp-horizonte, 55%) - 4px);
    height: 46px;
    background:
        radial-gradient(60% 100% at 20% 60%, rgba(160, 184, 220, .13), transparent 70%),
        radial-gradient(45% 100% at 62% 45%, rgba(160, 184, 220, .10), transparent 72%),
        radial-gradient(70% 100% at 92% 65%, rgba(160, 184, 220, .11), transparent 70%);
    background-size: 62% 100%;
    background-repeat: repeat-x;
    filter: blur(5px);
    opacity: .75;
    animation: tp-neblina-anda 96s linear infinite;
}

@keyframes tp-neblina-anda {
    from { background-position: 0 0; }
    to   { background-position: 62% 0; }
}

/* ---------- o chão ----------
   Terra, não tapete. A cor vem de baixo para cima, mais escura no
   fundo, e por cima dela duas texturas de grão bem fracas — sem elas
   o chão vira um retângulo pintado, que é exatamente o que ele não
   pode parecer. */
.tp-chao {
    top: var(--tp-horizonte, 55%);
    bottom: 0;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(74, 104, 78, .16), transparent 62%),
        linear-gradient(to bottom, #141c18 0%, #0e1412 42%, rgba(9, 12, 14, 0) 100%);
}

/* O grão da terra: dois campos de pontinhos em tamanhos diferentes.
   Parados, porque chão não se mexe. */
.tp-chao::before,
.tp-chao::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.tp-chao::before {
    background-image:
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, .22) 1px, transparent 1px);
    background-size: 17px 17px, 23px 23px;
    background-position: 0 0, 8px 11px;
    opacity: .7;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
            mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
/* E a linha do horizonte em si: um fio de luz onde o chão encontra a
   mata. É o detalhe que faz os dois parecerem encostados em vez de
   colados. */
.tp-chao::after {
    top: 0;
    bottom: auto;
    height: 1px;
    background: linear-gradient(to right,
        transparent, rgba(190, 214, 190, .13) 22%, rgba(190, 214, 190, .16) 70%, transparent);
}

/* =============================================================
   OS BICHOS E O CÉU
============================================================= */

/* ---------- vaga-lumes ----------
   Só à noite, e nunca em coro: cada um com o seu tempo e o seu atraso.
   Vaga-lume sincronizado vira pisca-pisca de Natal. */
.tp-vagalume {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cfe89a;
    box-shadow: 0 0 6px 2px rgba(190, 232, 130, .55);
    opacity: 0;
    pointer-events: none;
}

@keyframes tp-vagavoa {
    0%   { transform: translate(0, 0)      scale(.7); opacity: 0; }
    12%  { opacity: .85; }
    28%  { transform: translate(14px, -9px) scale(1); opacity: .25; }
    44%  { opacity: .9; }
    60%  { transform: translate(-6px, -19px) scale(.85); opacity: .15; }
    78%  { opacity: .7; }
    100% { transform: translate(9px, -30px) scale(.6); opacity: 0; }
}

.tp-v1 { left: 12%; bottom: calc(100% - var(--tp-horizonte, 55%) - 2px);  animation: tp-vagavoa 11s ease-in-out infinite; }
.tp-v2 { left: 27%; bottom: calc(100% - var(--tp-horizonte, 55%) + 14px); animation: tp-vagavoa 14s ease-in-out 2.4s infinite; }
.tp-v3 { left: 44%; bottom: calc(100% - var(--tp-horizonte, 55%) + 4px);  animation: tp-vagavoa 9.5s ease-in-out 5.1s infinite; }
.tp-v4 { left: 61%; bottom: calc(100% - var(--tp-horizonte, 55%) + 20px); animation: tp-vagavoa 13s ease-in-out 1.2s infinite; }
.tp-v5 { left: 76%; bottom: calc(100% - var(--tp-horizonte, 55%) - 4px);  animation: tp-vagavoa 12s ease-in-out 6.8s infinite; }
.tp-v6 { left: 88%; bottom: calc(100% - var(--tp-horizonte, 55%) + 10px); animation: tp-vagavoa 10.5s ease-in-out 3.6s infinite; }
.tp-v7 { left: 5%;  bottom: calc(100% - var(--tp-horizonte, 55%) + 24px); animation: tp-vagavoa 15s ease-in-out 8.2s infinite; }

/* ---------- pássaros ----------
   Dois traços em "v" batendo asa, atravessando bem no alto. De dia
   apenas: pássaro voando à meia-noite é erro de quem nunca olhou o
   céu. */
.tp-passaro {
    position: absolute;
    width: 11px;
    height: 5px;
    opacity: 0;
    pointer-events: none;
}
.tp-passaro span {
    position: absolute;
    top: 0;
    width: 6px;
    height: 5px;
    border-top: 1.4px solid rgba(30, 38, 52, .5);
    border-radius: 60% 60% 0 0 / 100% 100% 0 0;
    animation: tp-asa 0.42s ease-in-out infinite;
}
.tp-passaro span:first-child { left: 0; }
.tp-passaro span:last-child  { left: 5px; transform: scaleX(-1); }

@keyframes tp-asa {
    0%, 100% { transform: scaleY(1)   translateY(0); }
    50%       { transform: scaleY(.42) translateY(1px); }
}
.tp-passaro span:last-child { animation-name: tp-asa-espelho; }
@keyframes tp-asa-espelho {
    0%, 100% { transform: scaleX(-1) scaleY(1)   translateY(0); }
    50%       { transform: scaleX(-1) scaleY(.42) translateY(1px); }
}

@keyframes tp-voa {
    0%   { transform: translateX(-40px) translateY(0); opacity: 0; }
    8%   { opacity: .75; }
    50%  { transform: translateX(50vw) translateY(-10px); }
    92%  { opacity: .6; }
    100% { transform: translateX(105vw) translateY(4px); opacity: 0; }
}

.tp-p1 { top: 15%; animation: tp-voa 26s linear infinite; }
.tp-p2 { top: 22%; animation: tp-voa 34s linear 9s infinite; transform: scale(.78); }
.tp-p3 { top: 11%; animation: tp-voa 41s linear 19s infinite; transform: scale(.62); }

/* ---------- a estrela cadente ----------
   Uma vez a cada volta longa. É a única coisa desta tela que existe só
   para dar gosto de olhar — e é por isso que ela é rara: coisa bonita
   que acontece toda hora deixa de ser bonita em dois dias. */
/* A estrela cadente andava DE RÉ.
   -------------------------------------------------------------
   O rastro é um retângulo com degradê: apagado numa ponta, aceso na
   outra. A ponta acesa é a CABEÇA — é a pedra, e o resto é o rastro
   que ela deixou para trás.

   Eu tinha posto o aceso à direita e mandado o elemento para a
   esquerda. Resultado: a cabeça ia atrás e o rastro na frente, que é
   uma estrela cadente voltando. Além disso o `translate(x, y)` vinha
   DEPOIS do `rotate`, então ele andava no eixo já girado — a direção
   do movimento não tinha relação nenhuma com a inclinação do risco.

   Agora é uma coisa só: o movimento é `translateX` no eixo do próprio
   risco. Ela desliza na direção em que aponta, com a cabeça na frente,
   por definição e não por coincidência de números. Mudar a inclinação
   agora muda a trajetória junto, como tem de ser. */
.tp-cadente {
    position: absolute;
    top: 9%;
    left: 4%;
    width: 88px;
    height: 1.6px;
    /* Aceso na DIREITA: é para lá que ela vai. */
    background: linear-gradient(to right,
        transparent, rgba(214, 230, 255, .55) 58%, rgba(255, 255, 255, .95));
    border-radius: 2px;
    opacity: 0;
    /* O giro pivota na ponta esquerda, que é a cauda: assim o risco
       nasce do ponto de partida em vez de nascer do meio dele. */
    transform-origin: 0 50%;
    transform: rotate(21deg) translateX(-160px);
    pointer-events: none;
}

@keyframes tp-risca {
    /* Noventa por cento do tempo ela não está lá. Coisa bonita que
       acontece toda hora deixa de ser bonita em dois dias. */
    0%, 90%   { opacity: 0; transform: rotate(21deg) translateX(-160px) scaleX(.3); }
    91%       { opacity: .95; }
    95%       { opacity: .85; transform: rotate(21deg) translateX(330px) scaleX(1); }
    98%, 100% { opacity: 0;   transform: rotate(21deg) translateX(470px) scaleX(.35); }
}

/* =============================================================
   A PAISAGEM REAGE AO TEMPO
=============================================================

   Sem isto a floresta seria um adesivo colado atrás: bonita no
   primeiro dia, morta no segundo. O que a faz parecer um lugar de
   verdade é ela MUDAR junto com o céu — clarear ao meio-dia, azular na
   noite, sumir na neblina da tempestade.

   A regra de leitura continua a mesma do resto desta folha: quanto
   pior o tempo, menos se enxerga longe. É assim na serra de verdade, e
   é assim que a pessoa entende sem legenda que a colheita está ruim.
*/

/* ---------- noite (sereno e parado-noite) ---------- */
.clh-canteiro-caixa[data-tempo="sereno"] .tp-serra,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-serra {
    background: #2a3454;
    opacity: .42;
}
.clh-canteiro-caixa[data-tempo="sereno"] .tp-mata-longe,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-mata-longe { background: #18213a; }
.clh-canteiro-caixa[data-tempo="sereno"] .tp-mata-perto,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-mata-perto { background: #0d1322; }
.clh-canteiro-caixa[data-tempo="sereno"] .tp-chao,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-chao {
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(60, 92, 90, .13), transparent 62%),
        linear-gradient(to bottom, #101822 0%, #0b1018 42%, rgba(8, 10, 14, 0) 100%);
}

/* Os vaga-lumes existem só aqui. De dia eles não seriam discretos —
   seriam um erro. */
.clh-canteiro-caixa[data-tempo="sereno"] .tp-vagalume { opacity: 1; }
.clh-canteiro-caixa[data-tempo="sereno"] .tp-cadente {
    animation: tp-risca 64s linear infinite;
}

/* ---------- dia de sol ---------- */
.clh-canteiro-caixa[data-tempo="sol"] .tp-serra {
    background: #5c6f8f;
    opacity: .38;
}
.clh-canteiro-caixa[data-tempo="sol"] .tp-mata-longe { background: #2f4a44; opacity: .8; }
.clh-canteiro-caixa[data-tempo="sol"] .tp-mata-perto { background: #1b3029; }
.clh-canteiro-caixa[data-tempo="sol"] .tp-capim { background: #1a2c22; }
.clh-canteiro-caixa[data-tempo="sol"] .tp-chao {
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(122, 158, 104, .2), transparent 62%),
        linear-gradient(to bottom, #1d2a1f 0%, #141d17 42%, rgba(12, 16, 14, 0) 100%);
}
.clh-canteiro-caixa[data-tempo="sol"] .tp-passaro { opacity: 1; }

/* A neblina da manhã fica mais fina no sol: dia claro se vê longe. */
.clh-canteiro-caixa[data-tempo="sol"] .tp-neblina { opacity: .38; }

/* ---------- nublado ---------- */
.clh-canteiro-caixa[data-tempo="nublado"] .tp-serra { opacity: .26; }
.clh-canteiro-caixa[data-tempo="nublado"] .tp-mata-longe { background: #222c3a; opacity: .62; }
.clh-canteiro-caixa[data-tempo="nublado"] .tp-mata-perto { background: #141c26; }
.clh-canteiro-caixa[data-tempo="nublado"] .tp-neblina { opacity: 1; }
.clh-canteiro-caixa[data-tempo="nublado"] .tp-passaro { opacity: .5; }

/* ---------- chuva ----------
   Chuva é coisa BOA aqui (é o que faz planta crescer), então a mata
   fica verde e viva, só com menos alcance de vista. */
.clh-canteiro-caixa[data-tempo="chuva"] .tp-serra { opacity: .2; }
.clh-canteiro-caixa[data-tempo="chuva"] .tp-mata-longe { background: #24403c; opacity: .66; }
.clh-canteiro-caixa[data-tempo="chuva"] .tp-mata-perto { background: #16292a; }
.clh-canteiro-caixa[data-tempo="chuva"] .tp-capim { background: #16281f; }
.clh-canteiro-caixa[data-tempo="chuva"] .tp-neblina { opacity: .95; }
.clh-canteiro-caixa[data-tempo="chuva"] .tp-chao {
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(86, 134, 104, .18), transparent 62%),
        linear-gradient(to bottom, #16211c 0%, #101815 42%, rgba(9, 12, 11, 0) 100%);
}

/* ---------- ventania ----------
   O vento é a única coisa que move a mata, e move de verdade: as duas
   camadas inclinam, a de trás menos que a da frente, porque é assim
   que se vê uma rajada passar por cima de um vale. */
.clh-canteiro-caixa[data-tempo="ventania"] .tp-mata-longe {
    transform-origin: 50% 100%;
    animation: tp-mata-venta 6.5s ease-in-out infinite;
}
.clh-canteiro-caixa[data-tempo="ventania"] .tp-mata-perto {
    transform-origin: 50% 100%;
    animation: tp-mata-venta 5.2s ease-in-out .3s infinite;
}
.clh-canteiro-caixa[data-tempo="ventania"] .tp-capim {
    animation: tp-capim-vendaval 2.6s ease-in-out infinite;
}

@keyframes tp-mata-venta {
    0%, 100% { transform: skewX(0deg); }
    35%      { transform: skewX(-1.6deg); }
    70%      { transform: skewX(.8deg); }
}
@keyframes tp-capim-vendaval {
    0%, 100% { transform: skewX(-1deg); }
    50%      { transform: skewX(-7deg); }
}

/* ---------- tempestade ----------
   Quase não se vê nada: a serra some, a mata distante vira vulto e só
   a mais próxima resiste. É o que a tela precisa dizer — a colheita
   está falhando de verdade. */
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-serra { opacity: .08; }
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-mata-longe { background: #171d28; opacity: .4; }
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-mata-perto { background: #0c1119; }
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-capim { background: #0a0f16; }
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-neblina { opacity: 1; filter: blur(8px); }
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-mata-perto,
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-mata-longe {
    transform-origin: 50% 100%;
    animation: tp-mata-tempestade 3.4s ease-in-out infinite;
}
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-capim {
    animation: tp-capim-vendaval 1.7s ease-in-out infinite;
}
@keyframes tp-mata-tempestade {
    0%, 100% { transform: skewX(-.6deg); }
    50%      { transform: skewX(-3.4deg); }
}

/* O relâmpago acende a floresta por um instante. É o detalhe que faz o
   clarão parecer que veio de fora, e não de dentro da tela. */
.clh-canteiro-caixa[data-tempo="tempestade"] .tp-mata-perto {
    animation: tp-mata-tempestade 3.4s ease-in-out infinite,
               tp-clarao 11s linear infinite;
}
@keyframes tp-clarao {
    0%, 3%, 100% { background-color: #0c1119; }
    1%           { background-color: #23304a; }
    2%           { background-color: #101725; }
    2.6%         { background-color: #1d2740; }
}

/* ---------- parado ----------
   Desligada: a cor sai de tudo. Não é noite nem tempestade — é uma
   foto parada, e tem de parecer uma. */
.clh-canteiro-caixa[data-tempo="parado"] .tp-serra,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-serra { opacity: .22; }
.clh-canteiro-caixa[data-tempo="parado"] .tp-mata-longe,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-mata-longe { filter: grayscale(.5); }
.clh-canteiro-caixa[data-tempo="parado"] .tp-mata-perto,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-mata-perto { filter: grayscale(.5); }
.clh-canteiro-caixa[data-tempo="parado"] .tp-neblina,
.clh-canteiro-caixa[data-tempo="parado-noite"] .tp-neblina { opacity: .5; }

/* =============================================================
   O QUE NÃO ESTÁ NA TELA NÃO ANIMA
=============================================================
   A mesma disciplina do resto desta folha: vaga-lume de dia, pássaro
   de noite e sway em tempo parado continuariam gastando quadro sem
   ninguém ver. `animation-play-state` sozinho não basta quando o
   elemento está invisível por opacidade — mas pausar é de graça e
   garante o caso em que ele volta.
*/
.tp-camada .tp-vagalume,
.tp-camada .tp-passaro,
.tp-camada .tp-cadente { animation-play-state: paused; }

.clh-canteiro-caixa[data-tempo="sereno"] .tp-vagalume,
.clh-canteiro-caixa[data-tempo="sereno"] .tp-cadente,
.clh-canteiro-caixa[data-tempo="sol"] .tp-passaro,
.clh-canteiro-caixa[data-tempo="nublado"] .tp-passaro { animation-play-state: running; }

.tp-passaro span { animation-play-state: inherit; }

/* =============================================================
   QUEM PEDIU PARA O MUNDO PARAR
=============================================================
   `prefers-reduced-motion` não é preferência de gosto: para quem tem
   sensibilidade vestibular, fundo que balança dá enjoo de verdade. A
   paisagem FICA — ela é o lugar, não o movimento —, mas nada nela se
   mexe, e o que existe só para dar gosto de olhar some.
*/
.clh-canteiro-caixa[data-parado="1"] .tp-capim,
.clh-canteiro-caixa[data-parado="1"] .tp-neblina,
.clh-canteiro-caixa[data-parado="1"] .tp-mata,
.clh-canteiro-caixa[data-parado="1"] .tp-vagalume,
.clh-canteiro-caixa[data-parado="1"] .tp-passaro,
.clh-canteiro-caixa[data-parado="1"] .tp-cadente,
.clh-canteiro-caixa[data-parado="1"] .tp-passaro span { animation: none !important; }

.clh-canteiro-caixa[data-parado="1"] .tp-cadente { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tp-capim, .tp-neblina, .tp-mata, .tp-vagalume,
    .tp-passaro, .tp-cadente, .tp-passaro span { animation: none !important; }
    .tp-cadente { display: none; }
}

/* A sombra acompanha a luz, e acompanha DEVAGAR. A posição dela vem de
   uma conta refeita a cada leitura da colheita; sem transição ela
   pularia de lugar a cada atualização, e sombra que pula denuncia que
   é desenho. */
.pl-sombra {
    transition: cx 2.4s ease, rx 2.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .pl-sombra { transition: none; }
}