/* ==========================================================================
   PS Digital — ajustes proprios
   --------------------------------------------------------------------------
   Carregado DEPOIS de default.css, style.css e responsive.css nas 6 paginas.

   Existe para que nenhum ajuste nosso entre no CSS do template: a regra da
   entrega e "manter 100% da estrutura do template", entao style.css e
   responsive.css so foram tocados na troca de accent (#9f3e20 -> #C9A227 e
   #a93e17 -> #B8901F). Tudo que for decisao da PS Digital mora aqui e pode ser
   revertido apagando este arquivo.

   Sem !important: a ordem de carga ja resolve. Se algum dia precisar de
   !important aqui, o seletor esta errado.
   ========================================================================== */


/* --------------------------------------------------------------------------
   MOBILE — respiro do topo
   --------------------------------------------------------------------------
   O template desenha o topo para desktop e nao reduz nada no celular:

   - o header nao e fixo, ele FLUTUA sobre o conteudo por causa de
     .header-area.header { margin-bottom: -110px }, e a secao seguinte se
     afasta sozinha com padding no proprio conteudo;
   - a linha do hero carrega .pt-200 .mt-50 (250px), que menos os -110px do
     header davam 140px de vazio entre o menu e o texto em 390px de largura;
   - .breadcrumb-area (o banner com o nome da pagina) fica com min-height de
     450px no mobile, para um titulo de 25px. Sobrava mais de metade do banner
     em vazio, e a mt-60 do titulo ainda empurrava o conteudo para fora dele.

   Os valores abaixo mantem o header respirando sobre o conteudo, que e o
   efeito do template, e cortam so o excesso.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   BANNER DE TITULO DAS PAGINAS INTERNAS
   (Servicos, Planos, A assessoria, Contato, Obrigado)
   --------------------------------------------------------------------------
   O template usa min-height fixo: 517px no desktop, 450px no mobile, para um
   titulo que mede 146px numa ponta e 24px na outra. Sobrava mais de metade do
   banner em vazio.

   min-height sai de cena em TODAS as larguras e quem dimensiona e o padding.
   O banner passa a se dimensionar pelo conteudo, entao serve de uma regra so:

     140px em cima = 110 do header flutuante + 30 de respiro
      30px embaixo = o mesmo respiro, agora simetrico

   Os 110px nao sao chute: o header NAO e fixo, ele flutua sobre o banner por
   .header-area.header { margin-bottom: -110px }, e a base dele cai exatamente
   a 110px do topo do banner em 390, 820 e 1800 de largura (medido nas tres).
   Titulo que comece antes disso passa por tras do menu.

   ATENCAO AO PISO: por isso o banner nao pode ser cortado a menos de
   110 + altura do titulo. No desktop isso da 256px de piso absoluto, e a
   metade exata dos 517px originais (258px) ficaria com 2px de folga. Chegar
   abaixo disso exigiria reduzir a fonte do h1, que e escala tipografica do
   template e sai da regra de manter 100% da estrutura. Alturas resultantes:
   ~316px no desktop (era 517) e ~194px no mobile (era 450).
   -------------------------------------------------------------------------- */

.breadcrumb-area {
    min-height: 0;
    padding-top: 140px;
    padding-bottom: 30px;
}

/* Com o banner dimensionado pelo conteudo, a mt-60 do template so empurraria
   o titulo para baixo e desequilibraria a folga. */
.breadcrumb-title.mt-60 {
    margin-top: 0;
}


@media (max-width: 767px) {

    /* Hero da home: 250px de topo -> 160px. Sobra ~50px entre o menu e o
       eyebrow, em vez de 140px. */
    .slider-area .single-slider .row {
        padding-top: 160px;
        margin-top: 0;
    }

    /* O pb-120 do template deixava um vazio grande antes da secao seguinte. */
    .slider-area .slider-content {
        padding-bottom: 70px;
    }

    /* Respiro entre o banner e o H1 da secao seguinte. O template abre a
       primeira secao com pt-150 (about, servicos, planos) ou pt-120 (contato),
       numero pensado para desktop: no celular davam ~200px de preto entre o
       fim do banner e o primeiro titulo.

       Mira nas CLASSES de padding, e nao em ".breadcrumb-area + section", de
       proposito: obrigado.html abre com pt-60, e uma regra unica no filho
       adjacente AUMENTARIA o espaco justamente na pagina que ja estava certa. */
    .breadcrumb-area + section.pt-150 {
        padding-top: 80px;
    }

    .breadcrumb-area + section.pt-120 {
        padding-top: 70px;
    }

}


/* --------------------------------------------------------------------------
   TABLET (768-991) — mesmo problema, em escala menor
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 991px) {

    /* 250px de topo -> 110px. Parece agressivo comparado ao mobile (160px),
       mas nesta faixa o h5 do eyebrow tem margin-top: 60px propria, que no
       celular nao existe. O vao visivel e sempre padding - 50, entao 110 da os
       mesmos ~60px de respiro. Medir pelo topo da row aqui engana. */
    .slider-area .single-slider .row {
        padding-top: 110px;
        margin-top: 0;
    }

    /* O banner nao precisa de nada aqui: a regra unica dimensionada pelo
       conteudo ja resolve esta faixa, que e justamente onde um min-height
       fixo mais engana. A fonte do titulo ainda e a grande, entao
       .breadcrumb-title mede ~216px quando quebra em 3 linhas (obrigado)
       contra ~146px em uma (servicos) e ~24px no celular. Um numero fixo
       chutado aqui joga o titulo para tras do menu; ja aconteceu. */

}


/* --------------------------------------------------------------------------
   IDENTIDADE PS DIGITAL E ASSETS FINAIS
   -------------------------------------------------------------------------- */

:root {
    --ps-black: #080808;
    --ps-surface: #121212;
    --ps-surface-raised: #191919;
    --ps-gold: #C9A227;
    --ps-gold-deep: #B8901F;
    --ps-copy: #F4F1E8;
    --ps-muted: #B8B5AD;
}

html,
body {
    overflow-x: hidden;
    background: var(--ps-black);
}

body,
button,
input,
select,
textarea {
    color: var(--ps-copy);
}

.ps-logo {
    display: block;
    width: auto;
    object-fit: contain;
}

.ps-logo-header {
    height: 82px;
    max-width: 138px;
}

.ps-logo-footer {
    height: 92px;
    max-width: 160px;
}

.ps-surface-gold {
    background:
        radial-gradient(circle at 88% 12%, rgba(201, 162, 39, .18), transparent 32%),
        linear-gradient(135deg, #0A0A0A 0%, #15130D 52%, #0A0A0A 100%);
}

/* Remove os azuis e roxos residuais do template nos componentes usados. */
.btn:hover,
.btn3,
.btn3:hover,
.slider-btn .btn,
.slider-btn .btn:hover,
.second-menu .btn i,
.services-container,
.testimonial-active .slick-next,
.wpa-box,
.faq-btn .number,
.per-info2 .box .icon i {
    background: linear-gradient(180deg, var(--ps-gold) 0%, #6F5816 100%);
}

.section-title h5,
.slider-content h5 {
    background: linear-gradient(90deg, rgba(201, 162, 39, .22) 0%, rgba(201, 162, 39, 0) 100%);
    border-image: linear-gradient(180deg, var(--ps-gold) 0%, #6F5816 100%) 1;
}

.about-content h3 span {
    background: linear-gradient(45deg, var(--ps-gold) 0%, #F4E6B3 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.src-btn ul li a {
    background: linear-gradient(180deg, rgba(201, 162, 39, .34) 0%, rgba(111, 88, 22, .48) 100%);
}

.wpa-box ul li .content {
    background: linear-gradient(180deg, rgba(201, 162, 39, .2) 0%, rgba(111, 88, 22, .2) 100%);
}

footer span {
    background-image: none;
}


/* --------------------------------------------------------------------------
   FUNDOS — os quatro PNG/JPG do template viraram gradiente
   --------------------------------------------------------------------------
   A troca de accent no style.css pegou os componentes (botao, borda, numero),
   mas nao pegava imagem: os quatro fundos grandes continuavam com a cor do
   template desenhada dentro do arquivo. Medido nos proprios arquivos:

     slider_bg.jpg   1920x1040   688 KB   brilho FERRUGEM embaixo (accent velho)
     bdrc-bg.png     1920x517    414 KB   brilho ROXO no centro
     cta-bg.png      1620x552   1072 KB   metade AZUL, metade VERMELHO TIJOLO
     footer-bg.png   1920x550    388 KB   brilho AZUL e VERMELHO nos cantos

   Sao 2,5 MB carregados em toda pagina para exibir gradiente — e gradiente que
   contradiz a paleta. Aqui vira CSS: mesma leitura visual, na cor certa, com
   custo de rede zero e sem depender de arquivo binario que ninguem consegue
   auditar depois. O `style` inline saiu das 15 marcacoes; a estrutura e as
   classes do template ficam intactas.
   -------------------------------------------------------------------------- */

/* Hero da home. O brilho nasce embaixo, como no arquivo original. */
.slider-area .single-slider.slider-bg {
    background-image:
        radial-gradient(ellipse 120% 78% at 50% 116%, rgba(201, 162, 39, .30) 0%, rgba(201, 162, 39, .07) 40%, transparent 70%),
        linear-gradient(180deg, #060606 0%, #0A0908 56%, #100D06 100%);
}

/* Banner de titulo das cinco paginas internas. */
.breadcrumb-area {
    background-image:
        radial-gradient(ellipse 68% 132% at 50% 128%, rgba(201, 162, 39, .22) 0%, transparent 62%),
        linear-gradient(180deg, #0A0A0A 0%, #12100A 100%);
}

/* Bloco de CTA. O grid fino era a unica coisa aproveitavel do arquivo antigo,
   entao ele volta em repeating-linear-gradient, em dourado de baixa opacidade. */
.cta-bg {
    background-image:
        repeating-linear-gradient(0deg, rgba(201, 162, 39, .055) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(90deg, rgba(201, 162, 39, .055) 0 1px, transparent 1px 68px),
        radial-gradient(ellipse 88% 140% at 87% 50%, rgba(201, 162, 39, .24) 0%, transparent 60%),
        linear-gradient(100deg, #090909 0%, #14110A 54%, #1B1608 100%);
}

/* Rodape. Os dois brilhos de canto do arquivo original, agora dourados. */
.footer-bg {
    background-image:
        radial-gradient(ellipse 38% 92% at 4% 28%, rgba(201, 162, 39, .16) 0%, transparent 60%),
        radial-gradient(ellipse 38% 92% at 96% 56%, rgba(201, 162, 39, .12) 0%, transparent 60%),
        linear-gradient(180deg, #070707 0%, #050505 100%);
}

.who-are-you .img-01 img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border: 1px solid rgba(201, 162, 39, .34);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.services-box .services-icon img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 18px;
}

.ps-cases {
    background: linear-gradient(180deg, #090909 0%, #11100D 100%);
}

/* O cartao e o mesmo de "como comecamos" (.single-post2); aqui so entra a borda
   dourada e a altura fixa da foto, pra os 3 slides ficarem do mesmo tamanho. */
.ps-cases .single-post2 {
    border: 1px solid rgba(201, 162, 39, .25);
    background: var(--ps-surface);
}

.ps-cases .blog-thumb2 img {
    height: 320px;
    object-fit: cover;
    object-position: center;
}

.ps-cases .blog-content2 {
    float: none;
    padding-top: 25px;
}

.ps-cases .blog-content2 h4 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 0;
}

/* O template so estiliza a seta dentro de .home-blog-active/.home-blog-active2;
   o carrossel novo tem classe propria, entao a seta e repetida aqui. */
.ps-cases-active {
    position: relative;
}

.ps-cases-active .slick-arrow {
    position: absolute;
    top: -84px;
    transform: translateY(-50%);
    left: 93%;
    padding: 0;
    z-index: 1;
    cursor: pointer;
    width: 44px;
    height: 44px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    border-radius: 50%;
    background: none;
    border: 1px solid rgba(255, 255, 255, .17);
    transition: all 0.3s ease-out 0s;
}

.ps-cases-active .slick-arrow.slick-next {
    right: 0;
    left: auto;
}

.ps-cases-active .slick-arrow:hover {
    background: linear-gradient(180deg, var(--ps-gold-deep) 0%, #6B4E0A 100%);
    color: #fff;
}

/* Planos: remove o roxo/azul remanescente do template. */
.price-count h2,
.pricing-box.active .price-count h2 {
    background: linear-gradient(100deg, var(--ps-gold-deep) 0%, var(--ps-gold) 55%, #6F5816 100%);
    color: #080808;
}

.price-count h2 strong,
.pricing-body li::before,
.pricing-box.active .pricing-body li::before {
    color: #F4F1E8;
}

.pricing-box.active {
    border: 1px solid rgba(201, 162, 39, .62);
    box-shadow: 0 24px 70px rgba(201, 162, 39, .12);
}

/* Últimos gradientes herdados do tema, normalizados para preto e dourado. */
.breadcrumb,
.pricing-box .pricing-btn .btn,
.pricing-box .pricing-btn .btn:hover,
.pricing-box.active .pricing-btn .btn,
.pricing-box.active .pricing-btn .btn:hover,
.btn i.fa-arrow-right-long {
    background: linear-gradient(180deg, var(--ps-gold) 0%, #6F5816 100%);
    border-color: var(--ps-gold-deep);
}

.services-container .src-btn li a {
    background: linear-gradient(180deg, rgba(201, 162, 39, .38) 0%, rgba(111, 88, 22, .48) 100%);
}

.call-info {
    background: linear-gradient(89deg, var(--ps-gold-deep) 43.16%, rgba(111, 88, 22, 0) 99.51%);
}

.faq-wrap .card-header h2 button .number {
    background: linear-gradient(180deg, var(--ps-gold) 0%, #6F5816 100%);
}

.b-meta ul li span {
    background: var(--ps-gold);
}

.contact-area3 .per-info2 {
    border: 1px solid rgba(201, 162, 39, .28);
    border-radius: 28px;
    overflow: hidden;
}

.contact-call-img img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center 42%;
}

.ps-thank-you-image {
    width: min(100%, 760px);
    max-height: 470px;
    object-fit: cover;
    object-position: center 42%;
    border-radius: 24px;
    border: 1px solid rgba(201, 162, 39, .3);
}

@media (max-width: 991px) {
    .ps-logo-header {
        height: 68px;
        max-width: 116px;
    }

    .who-are-you .img-01 {
        padding-left: 0;
    }

    .ps-cases .blog-thumb2 img {
        height: 260px;
    }
}

@media (max-width: 767px) {
    .ps-logo-header {
        height: 62px;
        max-width: 104px;
    }

    .ps-logo-footer {
        height: 78px;
    }

    .services-box .services-icon img {
        height: 190px;
    }

    .ps-cases .blog-thumb2 img {
        height: 300px;
    }
}

/* --------------------------------------------------------------------------
   Cadencia "Semanal / Mensal" (assessoria.html)
   --------------------------------------------------------------------------
   O template marcava os dois ritmos com tres PNGs fora da paleta: vcrl-01.png
   e vcrl-02.png (bolinhas 20x20) e vcrl-line.png (risco 156x1 em vermelho
   #E3482B). Viraram CSS — mesma leitura, cor da marca, tres arquivos a menos.
   -------------------------------------------------------------------------- */
.vision-area-content ul.ps-cadencia li .ps-dot {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--ps-gold) 0%, var(--ps-gold-deep) 100%);
}

.vision-area-content ul.ps-cadencia li.ps-rule {
    display: block;
    width: 156px;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
            rgba(201, 162, 39, 0.55) 0%,
            rgba(201, 162, 39, 0) 100%);
}

/* --------------------------------------------------------------------------
   Selo das secoes "Nossa missao" e "Nossa visao" (assessoria.html)
   --------------------------------------------------------------------------
   Os 7 selos do site sao pilula dourada. Estes dois eram os unicos brancos
   tracejados, porque o template traz uma variante propria em
   `.vision-area .section-title h5, .misson-area .section-title h5`
   (style.css:3261) que zera o fundo e troca a borda por `1px dashed #fff` —
   mais especifica que o nosso `.section-title h5`, entao vencia. Aqui a
   especificidade empata e a ordem de carga resolve, sem !important.
   -------------------------------------------------------------------------- */
.vision-area .section-title h5,
.misson-area .section-title h5 {
    border-radius: 5px;
    border: 1px solid transparent;
    border-image: linear-gradient(180deg, var(--ps-gold) 0%, #6F5816 100%) 1;
    background: linear-gradient(90deg,
            rgba(201, 162, 39, .22) 0%,
            rgba(201, 162, 39, 0) 100%);
}

/* --------------------------------------------------------------------------
   Tabela de fases (.wpa-box) — funil de 7 etapas e estagio de maturacao
   --------------------------------------------------------------------------
   Duas causas de desalinhamento no template:

   1. `.wpa-box ul { display: inline-flex }` (style.css:5425) nao tem largura,
      entao cada coluna fica do tamanho do proprio texto — as 4 nunca batem.
   2. `.wpa-box ul li .content { margin-top: 150px }` (style.css:5454) e um
      offset FIXO. Como os <h3> tem 1 ou 2 linhas ("Chegada" x "Proposta e
      negociacao"), a caixa de conteudo de cada coluna comeca numa altura
      diferente.

   Correcao: colunas de largura igual, reserva de duas linhas no <h3> e o
   .content ocupando a sobra (flex: 1) — assim topo e base das 4 caixas coincidem.

   Obrigatorio ficar dentro de @media (min-width: 992px): responsive.css:2106
   (768-991px) e :2334 (<=767px) trocam `.wpa-box ul` para `display: grid` no
   empilhamento mobile, e este arquivo carrega DEPOIS do responsive.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

    .wpa-box ul {
        display: flex;
        width: 100%;
    }

    .wpa-box ul li {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .wpa-box ul li h3 {
        line-height: 1.3;
        min-height: 2.6em;
        /* reserva as duas linhas do titulo mais longo */
        margin-bottom: 20px;
    }

    .wpa-box ul li .content {
        margin-top: 0;
        /* no lugar dos 150px fixos */
        flex: 1 1 auto;
    }
}

/* --------------------------------------------------------------------------
   Dropdown do formulario de diagnostico (contato.html)
   --------------------------------------------------------------------------
   O template nao previa <select>: `.contact-field` so estiliza input e textarea.
   Estas regras vinham de um <style> inline no contato.html com valores crus
   (#E0E0E01C, #ffffff0d, #101010) e sem estado de foco. Aqui elas passam a usar
   os tokens do :root e ganham foco visivel, cursor e placeholder apagado.
   Altura e caret dourado sao os mesmos do input do template (style.css:8789).
   -------------------------------------------------------------------------- */
.contact-field select {
    width: 100%;
    height: calc(2.5em + .75rem + 2px);
    padding-left: 12px;
    padding-right: 38px;
    border-radius: 10px;
    border: 1px solid rgba(201, 162, 39, .18);
    background-color: rgba(255, 255, 255, .05);
    color: var(--ps-copy);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9A227'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.contact-field select:hover {
    border-color: rgba(201, 162, 39, .38);
}

.contact-field select:focus,
.contact-field select:focus-visible {
    outline: none;
    border-color: var(--ps-gold);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .15);
}

/* O menu aberto e desenhado pelo sistema operacional e nao herda o fundo escuro. */
.contact-field select option {
    background: var(--ps-surface);
    color: var(--ps-copy);
}

/* Placeholder apagado para nao parecer resposta ja preenchida.
   Sao duas regras separadas de proposito: lista de seletores com um :has()
   nao suportado invalidaria a regra inteira. O #investe e `required`, entao
   cai no :invalid; o #verba e opcional e depende do :has(). */
.contact-field select:invalid {
    color: var(--ps-muted);
}

.contact-field select:has(option[value=""]:checked) {
    color: var(--ps-muted);
}

.contact-field select option[value=""] {
    color: var(--ps-muted);
}