/* ---------------------------------------------------------------------------
   Ajustes da Goiás Host sobre o tema (não altera o style.css original do tema).
   Paleta da casa: azul-marinho #0d3b66 · dourado #d4a017 · apoio claro #f4f7fb
   --------------------------------------------------------------------------- */

:root {
    --gh-azul: #0d3b66;
    --gh-azul-claro: #16558f;
    --gh-dourado: #d4a017;
    --gh-dourado-escuro: #b8890f;
    --gh-fundo-claro: #f4f7fb;
}

/* Títulos e textos */
h1, h2, h3, h4, h5, h6 { color: var(--gh-azul); }
a { color: var(--gh-azul); }
a:hover { color: var(--gh-dourado-escuro); }
.section-tittle h2, .section-tittle p { color: var(--gh-azul); }
.section-tittle p { color: #5a6673; }

/* Botões: troca o gradiente roxo/rosa do tema pelo azul da casa */
.btn,
.btn::before,
.main-header .main-menu ul ul.submenu,
form.search-box .input-form .search-form button,
.pricing-card-area .single-card .card-bottom .borders-btn:hover,
.pricing-card-area .single-card:hover .card-bottom .borders-btn,
.footer-area .footer-form form .form-icon button {
    background: var(--gh-azul);
    background: -moz-linear-gradient(top, var(--gh-azul-claro) 0%, var(--gh-azul) 100%);
    background: -webkit-linear-gradient(top, var(--gh-azul-claro) 0%, var(--gh-azul) 100%);
    background: linear-gradient(to bottom, var(--gh-azul-claro) 0%, var(--gh-azul) 100%);
    filter: none;
}

.btn:hover, .btn3:hover { color: #fff !important; }

/* Botão de contorno (planos) em dourado */
.borders-btn,
.border-btn {
    border: 1px solid var(--gh-dourado);
    color: var(--gh-dourado-escuro);
}
.borders-btn:hover, .border-btn:hover { color: #fff; }

.btn3 {
    background: transparent;
    /* O .btn3 do tema é BRANCO (feito para o cabeçalho escuro): em seção clara ele desaparecia —
       texto branco sobre fundo branco. Na casa ele é azul; nas áreas escuras volta ao branco. */
    border: 1px solid var(--gh-azul);
    color: var(--gh-azul) !important;
    border-radius: 30px;
    padding: 14px 28px;
    display: inline-block;
    font-weight: 600;
}
.btn3:hover { background: var(--gh-dourado); border-color: var(--gh-dourado); color: #212529 !important; }

/* Áreas escuras (cabeçalho, hero, rodapé): mantém o branco do tema */
.main-header .btn3,
.gh-nav .btn3,
.slider-area .btn3,
.hero-area .btn3,
.footer-area .btn3 {
    border-color: rgba(255, 255, 255, .6);
    color: #fff !important;
}

.radius-btn3 { margin-left: 10px; }

/* Botão de busca dentro das linhas de filtro: o .btn do tema tem padding de 27px/44px (e
   line-height:0) e ficava gigante ao lado dos campos. Aqui ele vira um botão de formulário normal. */
form.d-flex > .btn,
form.d-flex > button.btn {
    padding: 11px 24px !important;
    line-height: 1.3 !important;
    overflow: visible;
}

/* Fundos escuros/roxos do tema viram fundo claro da casa */
.section-bg1 { background: var(--gh-fundo-claro); }
.pricing-card-area .single-card:hover { border-color: var(--gh-azul); }
.pricing-card-area .single-card .card-mid h4 { color: var(--gh-azul); }
.pricing-card-area .single-card .card-bottom ul li { color: #5a6673; }
.single-cat .cat-cap h5 a, .single-cat .cat-cap h5 span { color: var(--gh-azul); }

/* A faixa dos planos: o tema pinta o roxo #2D0A31 atrás do título (::before/::after do
   .pricing-card-area) e o azul da casa desaparece nesse fundo. Nessa faixa o título e a linha de
   apoio vão de branco — é o que se lê. */
.pricing-card-area .section-tittle h2 { color: #fff; }
.pricing-card-area .section-tittle p { color: #e3dceb; }

/* Cabeçalho fixo da casa */
.gh-nav { background: var(--gh-azul); }
.gh-nav .main-menu ul li a { color: #fff; }
.gh-nav .main-menu ul li a:hover { color: var(--gh-dourado); }
.gh-nav .mobile_menu .slicknav_menu { background: transparent; }
.gh-marca { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .5px; }

/* Rodapé */
.footer-area { background: #0a2c4d; }
.gh-contato-rodape { list-style: none; padding: 0; color: #c9d6e2; }
.gh-contato-rodape li { margin-bottom: 6px; }
.gh-rodape-base { color: #9fb3c8; font-size: 14px; padding: 18px 0 0; }

/* Avisos e cartões das telas internas */
.gh-alerta { padding-top: 24px; }
.gh-preco-destaque .single-card { border: 2px solid var(--gh-dourado); }
.gh-plano-nota { font-size: 13px; color: #8a949e; }

/* Cabeçalho (inclusive quando fixo ao rolar) — barra roxa do tema vira azul */
.main-header, .main-header.sticky-bar, .main-header .main-menu, .header-area, .sticky-bar {
    background-color: var(--gh-azul) !important;
}
.main-header.sticky-bar .main-menu ul li a, .sticky-bar .main-menu ul li a { color: #fff; }

/* Botão "contratar" dos planos: contorno dourado (o tema força rosa em regra mais específica) */
.pricing-card-area .single-card .card-bottom .borders-btn {
    border: 1px solid var(--gh-dourado) !important;
    color: var(--gh-dourado-escuro) !important;
}
.pricing-card-area .single-card .card-bottom .borders-btn:hover { color: #fff !important; }

/* Ícones do tema (linha roxa) → matiz azul da casa */
.single-cat .cat-icon img,
.pricing-card-area .single-card .card-top img,
.hero__img img {
    filter: hue-rotate(300deg) saturate(.7);
}

/* Voltar ao topo */
#back-top { background: var(--gh-azul); }

/* Hero: fundo do tema (roxo) vira degradê azul da casa */
.slider-area.slider-bg {
    background: #08243d !important;
    background: -webkit-linear-gradient(135deg, #08243d 0%, #0d3b66 55%, #16558f 100%) !important;
    background: linear-gradient(135deg, #08243d 0%, #0d3b66 55%, #16558f 100%) !important;
}
.hero__caption span {
    color: var(--gh-dourado);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
}
.hero__caption h1 { color: #fff; }
.hero__caption p { color: #cfdcea; }

/* O h1 do hero, 5px menor em cada faixa (pedido do dono). O tamanho vive no style.css do tema, que
   não é editado — a casa sobrescreve aqui. O seletor é o mesmo que o tema usa
   (.slider-area .hero__caption h1), de propósito: com a mesma especificidade, o que vem depois
   (este arquivo) vence; as faixas repetem as do tema, senão a regra geral valeria em todas. */
.slider-area .hero__caption h1 { font-size: 60px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-area .hero__caption h1 { font-size: 50px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-area .hero__caption h1 { font-size: 45px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .slider-area .hero__caption h1 { font-size: 24px; }
}
@media (max-width: 575px) {
    .slider-area .hero__caption h1 { font-size: 24px; }
}
/* A ilustração do tema é roxa: gira o matiz para o azul da casa */
.hero__img img { filter: hue-rotate(300deg) saturate(.75) brightness(1.05); }

/* Faixa de busca de domínio logo abaixo do hero */
.domain-search-area { background: var(--gh-fundo-claro); margin-top: 32px; }
.domain-search-area h3, .domain-search-area h2 { color: var(--gh-azul); }

/* A busca de domínio deixou de ser o campo do tema (com a lupa redonda escondida no canto) e virou
   campo rotulado + botão escrito: é a única pista de que dá para pesquisar ali. O botão é o .btn da
   casa; o campo é o .form-control do Bootstrap — o mesmo padrão da página de resultado. */
.domain-search-area .form-control {
    height: 52px;
    border: 1px solid #cdd9e5;
    border-radius: 30px;
    padding: 0 22px;
    font-size: 16px;
    color: #333;
}
.domain-search-area .form-control::placeholder { color: #8a949e; }
.domain-search-area .btn { height: 52px; line-height: 1; }

/* Tabelas dos painéis */
.table thead.table-light th { color: var(--gh-azul); }
.badge.bg-warning { color: #3a2c00; }

/* Link das dicas ("veja as dicas", "Dicas para escolher um bom nome"): a cor de fonte assume o
   dourado que era do mouse-over, e o mouse-over assume o azul da casa — no meio do texto cinza, o
   link precisa puxar o olho. Vem por último de propósito: mesma especificidade do "a:hover" lá de
   cima, e com o mesmo peso quem vale é o que aparece depois. */
a.gh-link-dica { color: var(--gh-dourado-escuro); }
a.gh-link-dica:hover { color: var(--gh-azul); }

/* --- Espaçamento dos ícones ---------------------------------------------------------------------
   Medido no navegador: nos planos o ícone respirava 20px antes do nome do plano, e na seção "O que
   vem no plano" o ícone colava no título (0px). O dono pediu o MESMO espaçamento nos dois, e 32px.
   O seletor dos planos repete o do tema (mesma especificidade + este arquivo vem depois = vence). */
.pricing-card-area .single-card .card-top img { margin-bottom: 32px; }
.services-area .single-cat .cat-icon img { margin-bottom: 32px; }

/* A segunda fileira de itens ("5 GB de espaço" em diante) ganha 32px a mais de respiro em relação à
   primeira. Só onde existem fileiras de verdade: a partir de 768px, quando os itens ficam 3 por
   linha e o quarto começa a segunda fileira. No celular é uma coluna só — fileira não existe, e o
   espaço extra só abriria um buraco no meio da lista. */
@media (min-width: 768px) {
    .services-area .row > div:nth-child(4) { margin-top: 32px; }
}

/* --- Faixa do título dos planos ("Escolha como pagar") -------------------------------------------
   O tema desenhava a faixa no ::before da seção, com 53% de altura fixa, e a diagonal no ::after.
   Isso deixava muito roxo sobrando embaixo e o título desequilibrado. Aqui a faixa vira um elemento
   de verdade: altura automática (abraça o título e a linha de apoio), 48px de respiro vertical, a
   diagonal de baixo preservada — e o título ganha 32px de margem superior, para equilibrar o vão,
   já que abaixo dele o espaço até os cards é maior. */
.pricing-card-area::before,
.pricing-card-area::after { display: none; }

.gh-faixa-planos {
    position: relative;
    background: #2D0A31;
    padding: 48px 0;
    margin-bottom: 70px;
}

/* A diagonal de baixo, igual à do tema (fica atrás dos cards, que a cortam). */
.gh-faixa-planos::after {
    position: absolute; top: 100%; left: 0; right: 0; z-index: -1; content: "";
    border-top: 120px solid #2D0A31;
    border-left: 2000px solid transparent;
}

.gh-faixa-planos .section-tittle { margin-top: 32px; }

/* A margem que o tema dá ao parágrafo entrava no meio da faixa e engordava o roxo embaixo (medido:
   15px no desktop, 50px no celular). Zerada, o respiro de baixo passa a ser só o padding de 48px. */
.gh-faixa-planos .section-tittle p { margin-bottom: 0; }
.gh-faixa-planos .section-tittle { margin-bottom: 0; }

/* --- Banner da agência, logo abaixo da busca de domínio ------------------------------------------
   Quem acabou de ver se o nome está livre está começando o projeto: é a hora certa de falar de site.
   A arte é 100% CSS (nenhuma imagem para baixar) e as animações respeitam quem pediu menos movimento
   no sistema operacional. */
.gh-parceiro { padding: 34px 0 40px; }

.gh-parceiro-caixa {
    position: relative; overflow: hidden; border-radius: 16px;
    display: flex; align-items: center; gap: 30px;
    padding: 30px 34px;
    background: linear-gradient(135deg, #08243d 0%, #0d3b66 55%, #16558f 100%);
    box-shadow: 0 16px 44px rgba(13, 59, 102, .22);
}

.gh-parceiro-texto { position: relative; z-index: 2; flex: 1 1 58%; }

.gh-parceiro-selo {
    display: inline-block; margin-bottom: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--gh-dourado);
}

.gh-parceiro-texto h3 { color: #fff; font-size: 26px; margin: 0 0 10px; }
.gh-parceiro-texto p { color: #cfdcea; margin: 0 0 18px; }
.gh-parceiro-texto strong { color: #fff; }

.gh-parceiro-botao {
    display: inline-block; padding: 13px 26px; border-radius: 30px;
    background: var(--gh-dourado); color: #212529 !important; font-weight: 700;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.gh-parceiro-botao:hover { background: #fff; color: var(--gh-azul) !important; transform: translateY(-2px); }

/* A arte: duas molduras de site (uma na frente, uma atrás), com barra de navegador, título, linhas de
   texto e um botão — mais a etiqueta "IA" aplicada sobre a moldura da frente. Tudo em CSS: nenhuma
   imagem para baixar e nada de retângulo solto empilhado no canto. */
.gh-parceiro-arte { position: relative; flex: 0 0 250px; height: 176px; display: none; }
@media (min-width: 992px) { .gh-parceiro-arte { display: block; } }

.gh-moldura {
    position: absolute; overflow: hidden;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 12px;
}
.gh-moldura-fundo {
    left: 108px; top: 0; width: 142px; height: 108px; opacity: .55;
    animation: gh-flutua 7s ease-in-out infinite .6s;
}
.gh-moldura-frente {
    left: 8px; top: 32px; width: 190px; height: 138px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
    animation: gh-flutua 6s ease-in-out infinite;
}

.gh-moldura-topo { display: flex; gap: 4px; padding: 8px 9px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.gh-moldura-topo i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .45); }

.gh-moldura-titulo { display: block; margin: 12px 12px 8px; height: 9px; width: 60%; border-radius: 4px; background: rgba(255, 255, 255, .55); }
.gh-moldura-texto { display: block; margin: 0 12px 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .26); }
.gh-moldura-texto.gh-curto { width: 54%; }
.gh-moldura-botao { display: block; margin: 12px; width: 72px; height: 15px; border-radius: 8px; background: var(--gh-dourado); }

.gh-parceiro-ia {
    position: absolute; left: 150px; bottom: 2px; z-index: 3;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--gh-dourado); color: #212529;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; letter-spacing: .5px;
    animation: gh-pulsa 3.2s ease-out infinite;
}

/* Um brilho atravessando o banner devagar, para ele não parecer um cartaz parado. */
.gh-parceiro-brilho {
    position: absolute; inset: -40% -20%; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
    animation: gh-brilha 7s linear infinite;
}

@keyframes gh-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes gh-pulsa {
    0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .55); }
    70% { box-shadow: 0 0 0 16px rgba(212, 160, 23, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}
@keyframes gh-brilha { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }

@media (prefers-reduced-motion: reduce) {
    .gh-parceiro-janela, .gh-parceiro-ia, .gh-parceiro-brilho { animation: none; }
}

@media (max-width: 767px) {
    .gh-parceiro-caixa { padding: 24px 22px; }
    .gh-parceiro-texto h3 { font-size: 22px; }
    .gh-parceiro-botao { display: block; text-align: center; }
}