/* ==============================================
   custom.css
   Estilos próprios do site Position1, mantidos
   separados dos arquivos do template (style.css)
   para sobreviver a futuras atualizações do tema.
   ============================================== */

:root {
    --color-primary-dark: #B35C00;
}

/* Badge "pre-title" acima do título de seção (ex: "Nossos Serviços") */
.title-style-two-left span.pre {
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: #141416;
    padding: 7px 18px;
    border-radius: 30px;
    margin-bottom: 15px;
}

/* Texto de destaque em parágrafos (cor da marca escurecida para melhor contraste em fundo claro) */
.highlight-primary {
    color: var(--color-primary-dark);
    font-weight: 600;
}

/* Efeito parallax na imagem de fundo da seção de serviços */
.service-bg_image-3.bg_image {
    background-attachment: fixed;
    overflow: hidden;
}

/* Recorta o overlay (data-black-overlay) nos cantos arredondados da imagem */
.service-bg_image-3.bg_image::before {
    border-radius: inherit;
}

/* [data-black-overlay] eleva o z-index da imagem (z-index: 2); garante que os
   cards de serviço continuem acima dela, e não por baixo */
.single-service-area-3 {
    z-index: 3;
}

@media only screen and (max-width: 991px) {
    /* background-attachment: fixed é instável/ignorado em boa parte dos navegadores mobile */
    .service-bg_image-3.bg_image {
        background-attachment: scroll;
    }
}

/* Efeito parallax na imagem de fundo da seção "Nossa trajetória"
   (why-choose/01.webp); data-black-overlay="5" (adicionado no HTML) escurece a
   imagem para não prejudicar a leitura dos números/contadores */
.company-experties-area.bg_image {
    background-attachment: fixed;
}

/* Sobrescreve o overlay preto plano padrão (data-black-overlay="5", 50%)
   por um gradiente mais escuro: mais claro em cima, quase preto embaixo,
   ambos mais escuros que os 50% originais */
.company-experties-area[data-black-overlay]::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.92));
    opacity: 1;
}

/* As bordas e o texto abaixo dos contadores foram pensados para o fundo sólido
   #1E1E20 (bg_dark) e ficam quase invisíveis sobre o gradiente escuro da foto;
   clareamos ambos para aumentar o contraste com o fundo */
.company-experties-area .funfacts-list-wrapper-5,
.company-experties-area .funfacts-list-wrapper-5 .single-fun-facts-area-5,
.company-experties-area .funfacts-list-wrapper-5 .single-fun-facts-area-5 .icon {
    border-color: rgba(255, 255, 255, 0.2);
}

.company-experties-area .funfacts-list-wrapper-5 .single-fun-facts-area-5 .counter-wrapper .bottom {
    color: #B0B0B0;
}

@media only screen and (max-width: 991px) {
    .company-experties-area.bg_image {
        background-attachment: scroll;
    }
}

/* Efeito parallax na imagem de fundo da seção "Como funciona o nosso
   processo?" (working-process/03.webp); data-black-overlay="8" (adicionado no HTML)
   escurece bastante a imagem para não prejudicar a leitura do texto/marquee */
.our-working-process-area-4.bg_image {
    background-attachment: fixed;
}

@media only screen and (max-width: 991px) {
    .our-working-process-area-4.bg_image {
        background-attachment: scroll;
    }
}

/* data-black-overlay dá à seção da imagem um z-index:2
   próprio, o que passou a sobrepor os cards de processo (01-04) que sobem por
   cima dela via margin-top negativo; devolve os cards para a camada de cima */
.working-process-mt-dec-4 {
    position: relative;
    z-index: 3;
}

/* CTA "Fale Conosco": vira link, mas mantém a mesma animação
   de hover do .rts-btn.btn-primary (preenchimento deslizando de baixo pra cima) */
.small-cta-area .cta-small-highlight {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.small-cta-area .cta-small-highlight a {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}
.small-cta-area .cta-small-highlight::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: var(--bg-dark-1);
    transform: translateY(110%);
    transition: 0.3s;
    transition-delay: 0.1s;
    z-index: -1;
    border-radius: inherit;
}
.small-cta-area .cta-small-highlight:hover::after {
    transform: translateY(0);
}

/* Centraliza o conteúdo (logo + título) dentro dos cards de clientes */
.rts-brand-area .single-brand-area-style {
    text-align: center;
    padding: 5px;
}
.rts-brand-area .single-brand-area-style .icon {
    display: flex;
    justify-content: center;
}

/* Logo do cabeçalho */
.header-two-wrapper .logo-area img {
    height: 44px;
    width: auto;
}

/* Card de portfólio: título movido para o rodapé do card (junto de serviço/cliente),
   fora da foto - substitui o antigo overlay ".inner-title-area" sobre a imagem. */
.single-construction-portfolio .inner-content .title {
    color: #141416;
    font-size: 22px;
    margin-bottom: 15px;
}

/* Torna o card inteiro clicável para a página de detalhe do projeto, sem precisar
   transformar o card em <a> (evitaria aninhar link dentro de link). */
.single-construction-portfolio .card-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* P&aacute;gina de detalhe do portf&oacute;lio: imagem sempre quadrada, à esquerda do conte&uacute;do. */
.portfolio-details-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}

/* Bot&atilde;o de zoom (Magnific Popup) sobre a foto da p&aacute;gina de detalhe do portf&oacute;lio -
   indica que a foto &eacute; clic&aacute;vel para ampliar em tela cheia. */
.portfolio-details-image .zoom-link {
    position: relative;
    display: block;
}
.portfolio-details-image .zoom-icon {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(8, 8, 10, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: .3s;
}
.portfolio-details-image .zoom-link:hover .zoom-icon {
    background: var(--color-primary);
}

/* Barra Anterior/Voltar/Pr&oacute;ximo da p&aacute;gina de detalhe do portf&oacute;lio (3 colunas).
   O card imagem+texto do tema (.single-next-prev-wrapper) originalmente s&oacute; funciona dentro de
   ".next-prev-project-wrapper" (2 colunas, sem bot&atilde;o central) - aqui ele divide o espa&ccedil;o com o
   bot&atilde;o central "Voltar ao Portf&oacute;lio", ent&atilde;o as regras abaixo repetem s&oacute; o necess&aacute;rio do
   tema sem depender daquele ancestral. */
.portfolio-nav-bar {
    border-top: 1px solid #DED7CF;
    padding-top: 40px;
    margin-top: 80px;
}
.portfolio-nav-bar .single-next-prev-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}
.portfolio-nav-bar .single-next-prev-wrapper img {
    max-width: 140px;
}
.portfolio-nav-bar .single-next-prev-wrapper.last {
    text-align: right;
}
.portfolio-nav-bar .single-next-prev-wrapper .info p {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 20px;
    color: #121212;
    max-width: 70%;
}
.portfolio-nav-bar .single-next-prev-wrapper.last .info p {
    margin-left: auto;
}
@media screen and (max-width: 575px) {
    .portfolio-nav-bar .single-next-prev-wrapper .info p {
        font-size: 17px;
        max-width: 100%;
    }
}

/* Selo "— Carro-chefe / Em expans&atilde;o / Novo" ao lado do t&iacute;tulo no mega menu de servi&ccedil;os */
.menu-badge-tag {
    color: var(--color-primary);
    font-size: 12px;
}

/* Destaque do item "Para Ag&ecirc;ncias e Designers" no rodap&eacute; - fundo cinza (mais sutil que a
   cor prim&aacute;ria) s&oacute; para diferenciar um pouco dos demais links da lista de Servi&ccedil;os. */
.single-nav-area-footer ul li.footer-highlight-link a {
    background: #3A3A40;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
}
.single-nav-area-footer ul li.footer-highlight-link a i {
    color: #fff;
}
.single-nav-area-footer ul li.footer-highlight-link a:hover {
    background: #48484f;
    color: #fff;
}

/* Aviso tempor&aacute;rio sobre depoimentos de exemplo (remover junto com o texto quando
   substitu&iacute;do por avalia&ccedil;&otilde;es reais) */
.disc.placeholder-note {
    opacity: .75;
    font-style: italic;
    margin-top: 8px;
}

/* Logo dentro do card "Fale com a gente" da sidebar do FAQ */
.single-sidebar-wized.get-contact .inner img {
    height: 100px;
    width: auto;
    margin-bottom: 14px;
}

/* Logo do rodap&eacute; */
.footer-wrapper-left-one > img {
    height: 60px;
    width: auto;
    margin-bottom: 16px;
}

/* Logo da barra de copyright */
.copyright-wrapper .copyright-logo {
    height: 15px;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
}

/* Estado inicial do c&iacute;rculo de progresso "voltar ao topo"; os valores reais de
   stroke-dasharray/stroke-dashoffset s&atilde;o recalculados via JS (main.js) assim que
   a p&aacute;gina carrega, isso aqui s&oacute; evita o flash do c&iacute;rculo completo antes disso */
.progress-wrap .progress-circle path {
    transition: stroke-dashoffset 10ms linear 0s;
    stroke-dasharray: 307.919, 307.919;
    stroke-dashoffset: 307.919;
}

/* CTA de servi&ccedil;o (ex.: "Pronto para colocar seu site no ar?"): os 60% padr&atilde;o
   do template quebram a linha cedo demais com o texto em portugu&ecirc;s, que &eacute;
   mais longo que a copy original em ingl&ecirc;s */
.call-to-action-area-service .inner {
    max-width: 75%;
}

/* Mega-menu de Servi&ccedil;os: todos os &iacute;cones passaram a ser Font Awesome (fa-light,
   s&oacute; contorno) em vez de SVGs pr&oacute;prios + fa-solid inline, para manter os cards
   com o mesmo estilo visual. Tamanho e cor centralizados aqui (em vez de repetidos por
   &iacute;cone) e a caixa do &iacute;cone com largura/altura fixas, para os itens n&atilde;o
   ficarem com alturas diferentes conforme o glifo de cada &iacute;cone. */
.rts-mega-menu.service-mega-menu-style .single-service-menu .icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.rts-mega-menu.service-mega-menu-style .single-service-menu .icon i {
    font-size: 26px;
    color: var(--color-primary);
}
.rts-mega-menu.service-mega-menu-style li a.free-consultation .single-service-menu .icon i {
    color: #fff;
}

/* Hover dos itens do mega-menu de Servi&ccedil;os: o tema original usava um rosa
   (#fff3f3) que n&atilde;o tem nada a ver com a marca. Troca para um tom leve da cor
   prim&aacute;ria da Position1 (laranja), com o t&iacute;tulo tamb&eacute;m assumindo essa
   cor no hover — mesmo padr&atilde;o j&aacute; usado nos cards de servi&ccedil;o da home
   (.single-service-area-3 a .title:hover). N&atilde;o afeta o bot&atilde;o "Solicite um
   Or&ccedil;amento" (free-consultation), que tem sua pr&oacute;pria regra, mais
   espec&iacute;fica, e continua s&oacute;lido. */
.rts-mega-menu.service-mega-menu-style li:hover a {
    background: rgba(245, 166, 35, 0.12);
}
.rts-mega-menu.service-mega-menu-style .single-service-menu .info .title {
    transition: color 0.3s;
}
.rts-mega-menu.service-mega-menu-style li:hover .single-service-menu .info .title {
    color: var(--color-primary);
}

/* Bot&atilde;o de hamburguer (abre o painel #side-bar): removido s&oacute; no desktop, onde
   o mega-menu completo j&aacute; cobre toda a navega&ccedil;&atilde;o e o bot&atilde;o +
   painel ficavam redundantes. Mant&eacute;m abaixo de 1200px, onde .nav-area (o menu
   principal) fica oculto via style.css e o painel do #side-bar &eacute; o &uacute;nico
   menu de navega&ccedil;&atilde;o dispon&iacute;vel (mobile/tablet). */
@media only screen and (min-width: 1200px) {
    .header-two-wrapper .header-end .nav-btn.menu-btn {
        display: none;
    }
}

/* Página do Post (single): no mobile o padding padr&atilde;o do tema para
   .blog-listing-content &eacute; de apenas 10px nas laterais, deixando o texto
   colado na borda do card; aumenta s&oacute; aqui (via .details, exclusivo desta
   p&aacute;gina) sem afetar outros usos de .blog-listing-content no tema. */
@media only screen and (max-width: 767px) {
    .blog-single-post-listing.details .blog-listing-content {
        padding: 25px 20px;
    }
}

/* Título/subtítulos dentro do HTML rico do post (campo texto-rico "descricao",
   docs/modules/_patterns/texto-rico.md): h1-h6 sem classe herdam a cor global de
   título (--color-heading-1, branca — pensada para textos sobre banners escuros)
   e ficam invisíveis sobre o card branco do post. */
.blog-single-post-listing.details .blog-listing-content h1,
.blog-single-post-listing.details .blog-listing-content h2,
.blog-single-post-listing.details .blog-listing-content h3,
.blog-single-post-listing.details .blog-listing-content h4,
.blog-single-post-listing.details .blog-listing-content h5,
.blog-single-post-listing.details .blog-listing-content h6 {
    color: var(--color-heading-dark);
}

/* Remove o margin-top/bottom padrão do tema (10px, regra global "ul li") das
   listas dentro do HTML rico do post — só na postagem, sem afetar outras
   listas (ex.: liststyle.bullet) usadas no restante do site. */
.blog-single-post-listing.details .blog-listing-content ul li {
    margin-top: 0;
    margin-bottom: 0;
}

/* Remove o margin-bottom padrão do tema (40px, regra global "p") dos
   parágrafos dentro do HTML rico do post — só na postagem. */
.blog-single-post-listing.details .blog-listing-content p {
    margin-bottom: 15px;
}
.blog-single-post-listing.details .blog-listing-content h2 {
    margin-top: 45px;
}

/* Sidebar de /blog e /post (components/blog-sidebar.php): acompanha o scroll até o fim do
   próprio conteúdo (busca+categorias+recentes+orçamento), então "congela" enquanto só a
   coluna principal continua rolando, e só volta a rolar junto quando o fim do conteúdo
   principal alcança o fim da sidebar - efeito clássico de sticky sidebar via position:sticky,
   que naturalmente para de grudar quando a .row (cuja altura é ditada pela coluna principal,
   bem mais alta) termina. Só no desktop (>=1200px, breakpoint xl), onde a sidebar fica ao
   lado do conteúdo — abaixo dele (mobile/tablet) grudar não faz sentido.
   align-items:flex-start é necessário porque o flex padrão do Bootstrap (stretch) esticaria
   a coluna da sidebar para a mesma altura da coluna principal, anulando o sticky.
   body{overflow:clip} corrige um efeito colateral do reset global do tema: "body" só declara
   overflow-x:hidden (style.css) - como só um eixo é não-visible, o CSS promove automaticamente
   o outro eixo (overflow-y) para "auto" (regra do spec de overflow "computed value"), o que
   torna o body um scroll container mesmo sem nunca rolar de fato (quem rola é o html, que já
   tem overflow-y:auto próprio) - e um sticky dentro de um scroll container que nunca rola nunca
   "gruda". "clip" nas duas evita esse fixup (nenhum eixo fica "visible") sem, ao contrário de
   "visible" puro, abrir uma barra de rolagem horizontal real (testado: banner-two-swiper-main-
   wrapper da home tem uma faixa larga que "visible" deixava vazar; overflow-x:hidden sozinho no
   <html> não segurava sozinho) - e "clip", diferente de "hidden", não cria um scroll container,
   então o body sai da equação do sticky. Restrito a >=1200px para não mexer no overflow:hidden
   proposital do body nos breakpoints menores. */
@media only screen and (min-width: 1200px) {
    body {
        overflow: clip;
    }
    .rts-blog-list-area .row.g-5 {
        align-items: flex-start;
    }
    .blog-sidebar-sticky {
        position: sticky;
        top: 104px;
    }
}

/* Bloco de destaque na home, logo abaixo do banner inicial: "Juntos vamos mais longe" (chamada
   para a p&aacute;gina de parceria com ag&ecirc;ncias/designers, /agencias-e-designers) e "Nossa
   Proposta" lado a lado, cada um em um box com .bg_primary (mesmo fundo s&oacute;lido da cor da
   marca j&aacute; usado na se&ccedil;&atilde;o de depoimentos), sem herdar as regras de
   .title-style-two-left (pensadas para fundo claro). */
.highlight-boxes-area .highlight-box-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
}
.highlight-boxes-area .highlight-box-item span.pre {
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-primary);
    background: #141416;
    padding: 7px 18px;
    border-radius: 30px;
    margin-bottom: 15px;
}
.highlight-boxes-area .highlight-box-item .title {
    color: #fff;
}
.highlight-boxes-area .highlight-box-item p.disc {
    color: #141416;
    max-width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    padding: 0 20px;
}
.highlight-boxes-area .highlight-box-item p.disc .highlight-primary {
    color: #fff;
}
.highlight-boxes-area .highlight-box-item .rts-btn {
    margin-top: 10px;
}
.highlight-boxes-area .highlight-box-item .rts-btn.btn-white::after {
    background: var(--bg-dark-1);
}

/* Filtro de categorias do Portf&oacute;lio (pages/portfolios.php): sem CSS pr&oacute;pria, cada
   bot&atilde;o (.rts-btn.btn-primary/.btn-white, display:flex no tema - block-level) caia numa
   linha pr&oacute;pria por padr&atilde;o. For&ccedil;a os bot&otilde;es lado a lado numa &uacute;nica
   linha; overflow-x:auto evita quebra/corte se um dia houver categorias demais para a largura
   dispon&iacute;vel (rola horizontalmente em vez de voltar a quebrar linha). */
.portfolio-filter-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
}
.portfolio-filter-wrapper .rts-btn {
    flex-shrink: 0;
}


.copyright-wrapper{
    padding: 10px 0;
}

/* Rodap&eacute; (components/footer.php): reduz o texto inteiro para 12px - mesmo padr&atilde;o de
   wildcard que o tema j&aacute; usa em ".copyright-area-one *" (que fica dentro do rodap&eacute; e
   j&aacute; nasce em 12px; aqui s&oacute; estende o mesmo tamanho ao restante: links, t&iacute;tulos
   "Institucional"/"Servi&ccedil;os" e o texto de apresenta&ccedil;&atilde;o &agrave; esquerda).
   !important necess&aacute;rio porque o tema tem regras mais espec&iacute;ficas por cima do que um
   wildcard simples vence (ex.: ".single-nav-area-footer .title" a 22px, ".single-nav-area-footer
   ul li a" a 15px). */
.rts-footer-area * {
    font-size: 12px !important;
}

/* Espa&ccedil;amento entre os links de cada coluna do rodap&eacute; (padr&atilde;o do tema: 17px) -
   reduzido para acompanhar o texto menor (12px) das colunas "Institucional"/"Servi&ccedil;os". */
.single-nav-area-footer ul {
    gap: 5px;
}

/* &Iacute;cones Font Awesome nos c&iacute;rculos de "Como trabalhamos" (substituem os SVGs gen&eacute;ricos
   do tema por &iacute;cones que representam cada etapa: briefing, desenvolvimento, publica&ccedil;&atilde;o). */
.single-choose-us-one .icon i {
    font-size: 32px;
    color: var(--color-primary);
}

/* CTA de /aplicativos-mobile: texto &agrave; esquerda, bot&atilde;o numa &aacute;rea pr&oacute;pria
   &agrave; direita, centralizado horizontal e verticalmente nela. Modificador .cta-split isolado
   deste CTA espec&iacute;fico - n&atilde;o afeta as outras p&aacute;ginas que reaproveitam
   .call-to-action-area-service (servicos, lojas-virtuais, etc.). */
.call-to-action-area-service.cta-split {
    justify-content: space-between;
}
.call-to-action-area-service.cta-split .cta-split-button {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 1;
}
@media only screen and (max-width: 767px) {
    .call-to-action-area-service.cta-split {
        flex-direction: column;
        align-items: flex-start;
    }
    .call-to-action-area-service.cta-split .cta-split-button {
        width: 100%;
        margin-top: 25px;
    }
}