/* =========================================================
   IMPÉRIO CONSÓRCIO — identidade e acabamento
   Mesma estrutura e layout do tema. Esta camada refina cor,
   tipografia, espaçamento e estados dos elementos.
   Carregada por último (ver partials/header_links.php).
   ========================================================= */

:root {
    --ouro:        #c9a227;   /* dourado da marca — para fundos e superfícies escuras */
    --ouro-claro:  #e8c86a;
    --ouro-texto:  #8c6a14;   /* dourado legível sobre fundo claro (contraste 5:1) */
    --preto:       #0b0b0d;
    --grafite:     #16161c;
    --linha-clara: rgba(255, 255, 255, .10);
    --texto:       #4a4a55;
    --texto-suave: #7c7c8a;
    --claro-2:     #f7f7f8;
    --transicao:   .25s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- tipografia base ---------- */

body {
    font-family: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--texto);
    -webkit-font-smoothing: antialiased;
}

p { line-height: 1.75; }

h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', Georgia, serif; }

::selection { background: var(--ouro); color: #1a1405; }

/* ---------- títulos de seção ---------- */

.section-title { margin-bottom: 55px; }

.section-title .sub-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 12px;
    line-height: 1.6;
}

.section-title h3 {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--ouro-texto);
}

.section-title h3:after {
    content: '';
    display: block;
    width: 62px;
    height: 2px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, var(--ouro-texto), var(--ouro-claro));
}

.introduction .section-title h3:after { margin-left: 0; }

/* ---------- cabeçalho ---------- */

.header { background: var(--preto); }

.header .top-bar {
    border-bottom: 1px solid var(--linha-clara);
    font-size: 13px;
    color: #a2a2ad;
}

.header .top-bar .welcome {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--ouro-claro);
}

.header .top-bar .phone { color: var(--ouro-claro); font-weight: 600; }
.header .top-bar .phone img { margin-right: 7px; position: relative; top: -1px; }
.header .top-bar .timeline { color: #a2a2ad; }
.header .top-bar .social-media li a { color: #a2a2ad; font-size: 17px; }
.header .top-bar .social-media li a:hover { color: var(--ouro); }
.header .top-bar .language img { opacity: .85; }

.header .navbar-default .navbar-header { padding: 16px 0; }
.header .navbar-brand { padding: 0 15px 0 0; }
.header .navbar-brand img { height: 74px; width: auto; }
.header .navbar-default .navbar-header .navbar-nav { margin-top: 14px; }

.header .navbar-default .navbar-header .navbar-nav li a {
    color: #ececef;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 10px 15px;
    position: relative;
}

.header .navbar-default .navbar-header .navbar-nav li > a:after {
    content: '';
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 2px;
    height: 1px;
    background: var(--ouro);
    transform: scaleX(0);
    transition: transform var(--transicao);
}

.header .navbar-default .navbar-header .navbar-nav li > a:hover:after { transform: scaleX(1); }
.header .navbar-default .navbar-header .navbar-nav li a:hover { color: var(--ouro-claro); }

.header .navbar-nav > li > .dropdown-menu {
    background: var(--grafite);
    border: 1px solid rgba(201, 162, 39, .25);
    padding: 12px 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.header .navbar-nav > li > .dropdown-menu:after { border-color: transparent transparent var(--grafite) transparent; }
.header .navbar-nav > li > .dropdown-menu li a { text-transform: none; letter-spacing: 0; font-size: 14px; }
.header .navbar-nav > li > .dropdown-menu li a:after { display: none; }
.header .navbar-toggle { color: var(--ouro); border-color: rgba(201, 162, 39, .35); margin-top: 18px; }

/* seta do submenu: serve ao menu de toque, onde nao existe hover */
.header .navbar-nav > li > a .caret-menu { display: none; }

/* ---------- slider: texto sobreposto, responsivo ---------- */

/* --- hero: crossfade próprio. O Revolution que vinha no tema estava
   incompleto (sem a extensão de transição) e nunca trocava de slide. --- */

.slider .banner {
    position: relative;
    background: var(--preto);
}

.slider > .container-fluid:first-child { padding-left: 0; padding-right: 0; }

.hero-slides {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: var(--preto);
}

.hero-slide {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .9s ease;
}

.hero-slide.ativo { opacity: 1; }

.hero-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    background: rgba(11, 11, 13, .5);
    border: 1px solid rgba(201, 162, 39, .38);
    color: var(--ouro-claro);
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    opacity: .5;
    transition: var(--transicao);
    backdrop-filter: blur(3px);
}

.slider:hover .hero-seta { opacity: 1; }
.hero-seta:hover { background: var(--ouro); border-color: var(--ouro); color: #1a1405; }
.hero-seta:focus-visible { opacity: 1; outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.hero-anterior { left: 26px; }
.hero-proximo { right: 26px; }

.hero-pontos {
    position: absolute;
    right: 34px;
    bottom: 34px;
    display: flex;
    gap: 9px;
    z-index: 6;
}

.hero-ponto {
    width: 28px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: var(--transicao);
}

.hero-ponto:hover { background: rgba(255, 255, 255, .7); }
.hero-ponto.ativo { background: var(--ouro); width: 44px; }

.slider-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.slider-overlay .container { pointer-events: auto; }

.so-conteudo { max-width: 620px; }

.so-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ouro-claro);
    margin-bottom: 14px;
}

.so-titulo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 52px;
    line-height: 1.12;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .55);
}

.so-titulo em { font-style: normal; color: var(--ouro-claro); }

.so-sub {
    font-size: 16px;
    line-height: 1.6;
    color: #d6d6de;
    margin: 0;
    max-width: 480px;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}

/* ---------- barra "Faça uma simulação" ---------- */

.slider .consultation-bar,
.slider .consultation-bar:before { background: var(--preto); }

/* a barra terminava cortada rente ao botão: ganha respiro, canto arredondado
   e um fio dourado fechando a lateral direita */
.slider .consultation-bar {
    padding: 24px 34px 24px 0;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .45);
}

.slider .consultation-bar:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 12px 12px 0;
    background: linear-gradient(180deg, var(--ouro-claro), var(--ouro-texto));
}

.slider .consultation-bar img {
    height: 60px;
    width: auto;
    margin: 0 20px 0 0;
}

.slider .consultation-bar h5 {
    color: #9a9aa6;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 4px;
}

.slider .consultation-bar h3 {
    color: var(--ouro-claro);
    font-size: 26px;
    line-height: 1;
    letter-spacing: .06em;
    margin: 0;
}

button.btn-simule-slide {
    background: var(--ouro);
    color: #1a1405;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 15px 30px;
    border: 0;
    border-radius: 4px;
    margin: 0 0 0 32px;
    white-space: nowrap;
    transition: var(--transicao);
}

button.btn-simule-slide:hover {
    background: var(--ouro-claro);
    color: #1a1405;
    box-shadow: 0 10px 26px rgba(201, 162, 39, .3);
}

/* ---------- diferenciais (carrossel) ---------- */

.practice-areas { padding: 95px 0 130px; }
.practice-areas ul li { padding: 0 14px; }
.practice-areas ul li figure { margin-bottom: 22px; }

.practice-areas ul li figure img {
    height: 74px;
    width: auto;
    opacity: .75;
    transition: var(--transicao);
}

.practice-areas ul li:hover figure img { opacity: 1; transform: translateY(-4px); }

/* titulo centralizado dentro de uma altura fixa: sem isso, um titulo de duas
   linhas empurrava o traco e o texto do cartao para baixo, desalinhando a
   linha do carrossel */
.practice-areas ul li h4 {
    font-size: 17px;
    line-height: 1.35;
    color: var(--ouro-texto);
    margin-bottom: 12px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.practice-areas ul li span { background: var(--ouro-texto); }

.practice-areas ul li p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--texto-suave);
    font-weight: 400;
    margin: 8px auto 0;
    max-width: 240px;
}

.practice-areas .slick-dots { margin-top: 34px; }
.practice-areas .slick-dots li.slick-active { background: var(--ouro-texto); }

/* o slick fixa a altura antes das fontes carregarem e o conteúdo transbordava,
   fazendo o formulário sobrepor o texto — deixa o carrossel crescer com o conteúdo */
.practice-areas .slick-list,
.practice-areas .slick-track { height: auto !important; }
.practice-areas .slick-track { display: flex; align-items: stretch; }
.practice-areas .slick-slide { height: auto; float: none; }
.practice-areas .slick-slide > div,
.practice-areas .slick-slide li { height: 100%; }

/* ---------- formulário do simulador ---------- */

.consulting-form:after { background: #ececed; opacity: .86; }

/* o tema puxava o card 280px para cima e ele batia no carrossel acima;
   150px mantém o efeito flutuante sem colisão */
form.form_simulacao {
    margin-top: -150px;
    background: var(--preto);
    border-radius: 14px;
    padding: 34px 28px 26px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.form_simulacao .titulo {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    line-height: 1.3;
    color: #fff;
    padding: 0;
    margin-bottom: 6px;
}

.form_simulacao .text-light {
    color: #9a9aa6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    margin-top: 10px;
}

/* Seleção do produto em cartões: o radio nu (um ponto de 13px ao lado de um
   ícone sem legenda) não dizia o que era clicável nem o que estava escolhido.
   O label vira o alvo inteiro, com rótulo, estado marcado e selo de check. */

.tipo_produto {
    display: flex;
    align-items: stretch;
    gap: 10px;
    padding: 16px 0 6px;
}

.tipo_produto .itens {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: inherit;
}

/* fora do fluxo visual, mas ainda focalizável pelo teclado */
.tipo_produto .itens input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.tipo_produto .itens label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 100%;
    margin: 0;
    padding: 14px 6px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    color: #b9b9c6;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transicao);
}

.tipo_produto .itens label i {
    margin: 0;
    font-size: 26px;
    line-height: 1;
    color: var(--ouro-claro);
    transition: var(--transicao);
}

.tipo_produto .itens label:hover {
    border-color: rgba(201, 162, 39, .55);
    background: rgba(201, 162, 39, .10);
    color: #fff;
}

.tipo_produto .itens input:checked + label {
    border-color: var(--ouro);
    background: rgba(201, 162, 39, .18);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--ouro), 0 8px 22px rgba(201, 162, 39, .18);
}

.tipo_produto .itens input:checked + label i { color: var(--ouro); }

/* selo de confirmação (fa-check) no canto do cartão escolhido */
.tipo_produto .itens label:after {
    content: "\f00c";
    font-family: FontAwesome;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--ouro);
    color: #1a1405;
    font-size: 9px;
    letter-spacing: 0;
    line-height: 15px;
    opacity: 0;
    transform: scale(.5);
    transition: var(--transicao);
}

.tipo_produto .itens input:checked + label:after { opacity: 1; transform: scale(1); }

.tipo_produto .itens input:focus + label { border-color: var(--ouro-claro); }

.tipo_produto .itens input:focus-visible + label {
    outline: 2px solid var(--ouro-claro);
    outline-offset: 2px;
}

@media (max-width: 380px) {
    .tipo_produto { gap: 7px; }
    .tipo_produto .itens label { padding: 12px 3px 10px; font-size: 9.5px; letter-spacing: .05em; }
    .tipo_produto .itens label i { font-size: 22px; }
}

form.form_simulacao .form-control {
    height: 46px;
    border-radius: 6px;
    border: 1px solid transparent;
    padding: 0 15px;
    font-size: 14.5px;
    color: #2b2b33;
    box-shadow: none;
    transition: var(--transicao);
}

form.form_simulacao select.form-control { padding-right: 8px; }
form.form_simulacao input[type="email"] { height: 46px; }
form.form_simulacao .form-group { margin-bottom: 12px; }

form.form_simulacao .form-control:focus {
    border-color: var(--ouro);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .22);
}

.form_simulacao .btn-simular {
    width: 100%;
    background: var(--ouro);
    color: #1a1405;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 0;
    border-radius: 6px;
    padding: 15px 0;
    margin-top: 6px;
    transition: var(--transicao);
}

.form_simulacao .btn-simular:hover {
    background: var(--ouro-claro);
    color: #1a1405;
    box-shadow: 0 12px 28px rgba(201, 162, 39, .32);
}

.aviso-simulacao {
    font-size: 11px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .5);
    text-align: center;
    margin: 14px 0 2px;
}

.consulting-form form { max-width: 440px; }
.consulting-form .image { margin-top: -150px; max-height: 560px; width: auto; }

/* ---------- conquistas (com vídeo de fundo) ---------- */

.featured-cases { padding: 95px 0 60px; }
.featured-cases:after { background: var(--preto); opacity: .78; }

.featured-cases figure {
    margin-bottom: 42px;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}

.featured-cases figure img {
    border-radius: 0;
    margin-bottom: 0;
    transition: transform .6s ease;
}

.featured-cases figure figcaption { padding: 24px 18px 26px; }

.featured-cases figure figcaption a {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.featured-cases figure figcaption a:hover { color: var(--ouro-claro); }
.featured-cases figure figcaption span { background: var(--ouro); height: 2px; }

.featured-cases figcaption button {
    background: transparent;
    border: 1px solid rgba(201, 162, 39, .55);
    color: var(--ouro-claro);
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 12px 22px;
    border-radius: 4px;
    margin-top: 16px;
    transition: var(--transicao);
}

.featured-cases figcaption button:hover {
    background: var(--ouro);
    border-color: var(--ouro);
    color: #1a1405;
}

.featured-cases .section-title h3 { color: #fff; }
.featured-cases .section-title h3:after { background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); }
.featured-cases .section-title .sub-title { color: #9a9aa6; }

/* ---------- sobre nós ---------- */

.introduction { padding: 100px 0 80px; }
.introduction .left-side { padding-right: 60px; }
.introduction .left-side .content-inner .section-title { margin-bottom: 32px; }

.introduction .left-side .content-inner p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--texto-suave);
    font-weight: 400;
}

.introduction .left-side .content-inner ul { margin: 26px 0 0; }

.introduction .left-side .content-inner ul li {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--texto);
    margin: 0 0 12px;
    padding-left: 26px;
    position: relative;
}

.introduction .left-side .content-inner ul li:before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ouro-texto);
    position: absolute;
    left: 0;
    top: 9px;
    float: none;
    margin: 0;
}

.introduction .right-side figure { text-align: center; }
.introduction .right-side figure img { max-width: 330px; display: inline-block; }

/* ---------- parceiros ---------- */

.logos { padding: 90px 0 100px; background: var(--claro-2); }

.logos figure {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 96px;
    padding: 14px 16px;
    margin-bottom: 22px;
    border: 1px solid #e6e6e9;
    border-radius: 8px;
    background: #fff;
    opacity: 1;
    transition: var(--transicao);
}

.logos figure:hover {
    opacity: 1;
    border-color: rgba(201, 162, 39, .55);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
    transform: translateY(-3px);
}

.logos figure img {
    width: auto;
    max-width: 100%;
    max-height: 52px;
    filter: grayscale(.4);
    opacity: .88;
    transition: var(--transicao);
}

.logos figure:hover img { filter: none; opacity: 1; transform: scale(1.04); }

.parceiros-nota {
    text-align: center;
    font-size: 13px;
    color: #9a9aa6;
    margin-top: 14px;
}

/* ---------- cabeçalho de páginas internas ---------- */

.int-header { background: var(--preto); padding: 62px 0; }

.int-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.int-header .breadcrumb { background: none; margin: 12px 0 0; font-size: 13px; }
.int-header .breadcrumb > li a { color: #a2a2ad; }
.int-header .breadcrumb > li a:hover { color: var(--ouro-claro); }
.int-header .breadcrumb > .active { color: var(--ouro-claro); }

/* ---------- contato ---------- */

.contact { padding: 90px 0; }

.contact h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ouro-texto);
    margin-bottom: 12px;
}

.contact address, .contact p { font-size: 15px; color: var(--texto-suave); line-height: 1.7; }
.contact i { color: var(--ouro-texto); margin-right: 6px; }

.contact .form-control {
    height: 48px;
    border-radius: 6px;
    border: 1px solid #dedee3;
    box-shadow: none;
    font-size: 15px;
    padding: 0 15px;
    transition: var(--transicao);
}

.contact textarea.form-control { height: auto; padding: 13px 15px; }

.contact .form-control:focus {
    border-color: var(--ouro);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}

.contact label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 7px;
}

.contact .submit {
    background: var(--ouro-texto);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 15px 38px;
    transition: var(--transicao);
}

.contact .submit:hover {
    background: var(--ouro);
    color: #1a1405;
    box-shadow: 0 12px 26px rgba(201, 162, 39, .28);
}

.captcha {
    border-radius: 6px;
    height: 48px;
    min-width: 128px;
    letter-spacing: .12em;
    background-size: cover !important;
    color: #1a1405;
}

input.captcha_result {
    height: 48px;
    width: 260px;
    max-width: 100%;
    border-radius: 6px;
    border: 1px solid #dedee3;
    padding: 0 15px;
    bottom: 0;
    margin-left: 8px;
    font-size: 15px;
}

input.captcha_result:focus {
    border-color: var(--ouro);
    box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
    outline: none;
}

.input-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .16) !important;
}

#map { border-radius: 10px; overflow: hidden; margin-top: 50px; line-height: 0; }

/* ---------- avisos ---------- */

.mensagem_resposta { font-size: 15px; font-weight: 600; padding: 15px 16px; }
.mensagem_resposta.sucesso { background: #1e9e4a !important; }

/* ---------- rodapé ---------- */

.footer-dark { background: var(--preto); color: #a2a2ad; padding-bottom: 0; }
.footer-dark .footer-top { border-bottom: 1px solid var(--linha-clara); padding: 34px 0; margin-bottom: 46px; }
.footer-dark .footer-top figure { max-width: 46px; margin-right: 18px; opacity: .9; }
.footer-dark .footer-top address, .footer-dark .footer-top p { font-size: 14px; line-height: 1.6; }
.footer-dark .footer-top b { color: #fff; }
.footer-dark address a, .footer-dark p a { color: var(--ouro-claro); }

.footer-dark figure.logo-footer { max-width: 145px; margin-bottom: 20px; }

.footer-dark h4 {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    color: var(--ouro-claro);
    margin-bottom: 10px;
}

.footer-dark p { font-size: 13.5px; color: #8a8a97; line-height: 1.7; }

.footer-dark dl.footer-menu dt {
    font-family: 'Playfair Display', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ouro-claro);
    margin-bottom: 16px;
}

.footer-dark dl.footer-menu dd { margin-bottom: 9px; }
.footer-dark dl.footer-menu dd a { color: #a2a2ad; font-size: 14px; transition: var(--transicao); }
.footer-dark dl.footer-menu dd a:hover { color: var(--ouro); padding-left: 4px; }

.footer-dark .sub-footer {
    background: #000;
    border-top: 1px solid var(--linha-clara);
    padding: 18px 0;
    margin-top: 44px;
}

.footer-dark .sub-footer .copyright, .footer-dark .sub-footer .creation { font-size: 12px; color: #74747f; }
img.developer-logo { height: 14px; margin-left: 4px; }

/* ---------- WhatsApp flutuante ---------- */

button.btn-whatsapp-desktop, button.btn-whatsapp-mobile {
    background: #1fa855;
    box-shadow: 0 10px 26px rgba(31, 168, 85, .32);
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
}

button.btn-whatsapp-desktop { padding: 13px 24px; border-radius: 6px 6px 0 0; }
.btn-whatsapp-desktop:hover, button.btn-whatsapp-mobile:hover { background: #17914a; }
button.btn-whatsapp-desktop i { margin-right: 6px; }

/* ---------- erro 404 ---------- */

.error-404 { padding: 90px 0; }
.error-404 h2 { font-size: 32px; color: var(--ouro-texto); margin: 26px 0 12px; }
.error-404 p { color: var(--texto-suave); }

.error-404 a {
    display: inline-block;
    margin-top: 22px;
    background: var(--ouro-texto);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 14px 30px;
    border-radius: 6px;
}

.error-404 a:hover { background: var(--ouro); color: #1a1405; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* O tema já corta o excesso horizontal (body, html { overflow-x: hidden }),
   o que escondia o problema em vez de resolvê-lo: o que passava da largura
   da tela simplesmente sumia. As causas foram corrigidas uma a uma abaixo.
   Nada de overflow é redeclarado aqui: com as seções todas em float, mexer
   no overflow do body o transforma em área de rolagem e trava a página. */

/* imagens do tema que não tinham limite e estouravam telas estreitas */
.error-404 img,
.footer-dark img,
.featured-cases figure img,
.contact img { max-width: 100%; height: auto; }

/* e-mail longo dentro de coluna estreita empurrava a página para o lado */
.footer-dark dl.footer-menu dd a {
    float: none;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 1199px) {
    .so-titulo { font-size: 44px; }
    .header .navbar-brand img { height: 66px; }
    .header .navbar-default .navbar-header .navbar-nav li a { padding: 10px 11px; font-size: 12px; }
}

@media (max-width: 991px) {
    .section-title h3 { font-size: 31px; }
    .so-titulo { font-size: 34px; }
    .so-sub { font-size: 15px; }
    .so-conteudo { max-width: 90%; }

    /* --- topo: a barra tinha 44px fixos, mas abaixo de 992px as três
       colunas empilham. A bandeira e as redes sociais vazavam por cima do
       logo e do menu. Agora a barra cresce com o conteúdo e as peças se
       reorganizam em linha, centralizadas. --- */
    .header .top-bar {
        height: auto;
        line-height: 1.6;
        padding: 9px 0;
        overflow: visible;
        float: none;
    }

    .header .top-bar .container > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .header .top-bar .container > .row > div {
        float: none;
        width: auto;
        max-width: 100%;
        padding: 2px 8px;
    }

    .header .top-bar .welcome { line-height: 1.6; }

    .header .top-bar .phone,
    .header .top-bar .timeline,
    .header .top-bar .language,
    .header .top-bar .social-media {
        float: none;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        line-height: 1.6;
        margin: 0 8px;
    }

    .header .top-bar .phone img { margin-right: 6px; top: 0; }
    .header .top-bar .language img { float: none; margin: 0; }
    .header .top-bar .social-media li { float: none; display: inline-flex; margin-left: 14px; }
    .header .top-bar .social-media li:first-child { margin-left: 0; }
    .header .top-bar .social-media li a { float: none; line-height: 1; }

    .header .navbar-brand img { height: 58px; }
    .header .navbar-default .navbar-header .navbar-nav { margin-top: 0; }
    .header .navbar-default .navbar-header .navbar-nav li > a:after { display: none; }

    .hero-slides { height: 340px; }
    .introduction { padding: 70px 0; }
    .introduction .left-side { padding-right: 0; }
    .practice-areas { padding: 70px 0 60px; }
    .featured-cases { padding: 70px 0 40px; }
    .logos { padding: 65px 0 75px; }
    .contact { padding: 65px 0; }
    .int-header { padding: 46px 0; }
    .int-header h2 { font-size: 29px; }

    /* --- simulador: sem a imagem ao lado (escondida em tablet e celular) o
       card ficava encostado à esquerda, com metade da faixa vazia --- */
    .consulting-form { padding: 70px 0; }

    .consulting-form form {
        max-width: 470px;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    form.form_simulacao { margin-top: 0; }

    /* --- conquistas: três cartões entre 768 e 991 apertavam o botão em
       duas linhas coladas na borda --- */
    .featured-cases figure figcaption { padding: 18px 12px 20px; }
    .featured-cases figure figcaption a { font-size: 16px; letter-spacing: .06em; }

    .featured-cases figcaption button {
        font-size: 10.5px;
        letter-spacing: .06em;
        padding: 11px 14px;
        margin-top: 12px;
    }

    /* --- rodapé: ícone e texto desalinhados quando o endereço quebrava --- */
    .footer-dark .footer-top > div {
        display: flex;
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .footer-dark .footer-top > div:last-child { margin-bottom: 0; }
    .footer-dark .footer-top figure { flex: 0 0 auto; float: none; margin: 0 16px 0 0; }
    .footer-dark .footer-top address, .footer-dark .footer-top p { display: block; }
}

/* Entre 768 e 991 o container do Bootstrap tem largura fixa de 750px: perto do
   piso da faixa ele encosta nas laterais e o titulo do slide ficava por baixo
   das setas. Aqui o texto se afasta o bastante para elas ficarem livres. */
@media (min-width: 768px) and (max-width: 991px) {
    .slider-overlay .container {
        width: auto;
        max-width: none;
        padding-left: 92px;
        padding-right: 92px;
    }

    .so-conteudo { max-width: 100%; }
}

@media (max-width: 767px) {
    .section-title { margin-bottom: 40px; }
    .section-title h3 { font-size: 26px; }
    .section-title .sub-title { font-size: 10.5px; letter-spacing: .16em; }

    /* o tema escondia o excesso do topo com overflow hidden e as redes
       sociais simplesmente sumiam no celular */
    .header .top-bar { font-size: 12.5px; overflow: visible; padding: 8px 0; }
    .header .top-bar .container > .row > div { padding: 2px 6px; }
    .header .top-bar .phone, .header .top-bar .timeline { margin: 0 6px; }
    .header .top-bar .timeline { word-break: break-word; }
    .header .top-bar .social-media li a { font-size: 18px; }

    /* alvos de toque do menu */
    .header .navbar-default .navbar-header { padding: 12px 0; }
    .header .navbar-toggle { margin-top: 12px; padding: 6px 4px; }
    .header .navbar-default .navbar-header .navbar-nav li a { padding: 12px 6px; font-size: 13px; }
    .header .navbar-default .navbar-collapse { border-top: 1px solid var(--linha-clara); padding-top: 6px; }

    /* submenu "Conquistas": no toque não existe hover, então abre pelo
       clique (classe .open, tratada pelo Bootstrap) */
    .header .navbar-default .navbar-header .navbar-nav li:hover .dropdown-menu { display: none; }
    .header .navbar-default .navbar-header .navbar-nav li.open .dropdown-menu { display: block; }

    .header .navbar-nav > li > .dropdown-menu {
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 6px 14px;
    }

    .header .navbar-nav > li > .dropdown-menu li a {
        color: #b9b9c6 !important;
        font-size: 13px;
        padding: 9px 6px;
    }

    .header .navbar-nav > li > .dropdown-menu li a:hover { color: var(--ouro-claro) !important; }
    .header .navbar-nav > li > a .caret-menu { display: inline-block; float: right; margin-top: 2px; transition: transform var(--transicao); }
    .header .navbar-nav > li.open > a .caret-menu { transform: rotate(180deg); }

    /* --- o texto voltou para dentro do banner. Numa faixa preta abaixo da
       foto ele ficava solto, sem relacao com a imagem que trocava atras.
       Agora sao o banner e a foto que acompanham o texto: a camada das
       imagens cobre o banner inteiro e o bloco de texto, de volta ao fluxo,
       e quem define a altura. Assim nada e cortado quando o titulo quebra em
       mais linhas ou o visitante aumenta a fonte do sistema. --- */
    .hero-slides {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        height: auto;
    }

    /* as fotos sao panoramas de 1920x582: esticadas ate a base do banner o
       cover ampliava tanto que sobrava so o meio da imagem. Elas ficam numa
       faixa de proporcao parecida com a original e o resto do banner usa o
       proprio fundo preto de .hero-slides */
    .hero-slide {
        bottom: auto;
        height: 250px;
        background-position: center 28%;
    }

    /* o degrade termina em preto exatamente onde a foto acaba, entao a emenda
       com o fundo do banner nao aparece e o texto corre por cima das duas
       partes como um bloco so */

    .slider-overlay {
        position: relative;
        height: auto;
        padding: 164px 0 44px;
    }

    /* as setas sobem para a faixa da foto: centralizadas no banner inteiro
       elas cairiam em cima do titulo */
    .hero-seta {
        width: 40px;
        height: 40px;
        font-size: 20px;
        opacity: 1;
        top: 92px;
        transform: none;
    }

    .hero-anterior { left: 12px; }
    .hero-proximo { right: 12px; }
    .hero-pontos { right: 0; left: 0; bottom: 15px; justify-content: center; }

    .so-conteudo { max-width: none; }
    .so-titulo { font-size: 28px; }
    .so-sub { max-width: none; font-size: 14.5px; }

    /* barra "Faça uma simulação": o fundo passa para a faixa inteira. Antes,
       o preto vinha de um pseudo-elemento de 200% de largura que criava
       rolagem lateral; sem ele sobravam duas tiras brancas nas laterais. */
    .slider > .container-fluid:last-child {
        background: var(--preto);
        border-bottom: 3px solid var(--ouro);
    }

    .slider .consultation-bar {
        /* o -50px do tema agora subiria por cima do texto e dos pontinhos,
           que passaram a ocupar o rodape do banner */
        margin-top: 0;
        padding: 20px 0 22px;
        border-radius: 0;
        box-shadow: none;
        background: none;
    }

    .slider .consultation-bar:after { display: none; }

    .slider .consultation-bar img { height: 52px; margin: 0 0 8px; }
    .slider .consultation-bar h3 { font-size: 23px; }
    button.btn-simule-slide { margin: 16px 0 0; width: 100%; max-width: 320px; }

    .practice-areas { padding: 55px 0 45px; }
    .practice-areas ul li h4 { min-height: 0; display: block; }
    .practice-areas .slick-dots { margin-top: 22px; }

    /* --- "Sobre nós": o tema mantinha display table-cell no celular, então
       as duas colunas continuavam lado a lado — o texto ficava numa tira
       estreita e a imagem saía da tela --- */
    .introduction { display: block; padding: 55px 0; }
    .introduction .container { display: block; }

    .introduction .left-side,
    .introduction .right-side {
        display: block;
        width: 100%;
        float: none;
        vertical-align: top;
    }

    .introduction .right-side { margin-top: 26px; }
    .introduction .right-side figure { width: 100%; float: none; margin: 0; }
    .introduction .right-side figure img { max-width: 200px; }

    .consulting-form { padding: 50px 0; }
    form.form_simulacao { padding: 26px 18px 22px; }
    .form_simulacao .titulo { font-size: 21px; }

    .featured-cases { padding: 55px 0 30px; }
    .featured-cases figure { margin-bottom: 26px; }
    .featured-cases figure figcaption { padding: 20px 16px 22px; }
    .featured-cases figure figcaption a { font-size: 18px; }
    .featured-cases figcaption button { font-size: 11px; padding: 12px 20px; }

    .logos { padding: 50px 0 55px; }
    .logos figure { height: 82px; padding: 12px; margin-bottom: 16px; }
    .logos figure img { max-height: 42px; }

    .contact { padding: 50px 0; }
    .contact .submit { width: 100%; }

    /* abaixo de 16px o iOS aplica zoom sozinho ao focar o campo e a pagina
       fica torta depois do preenchimento */
    form.form_simulacao .form-control,
    .contact .form-control,
    input.captcha_result { font-size: 16px; }
    .captcha { display: block; margin-bottom: 10px; }
    input.captcha_result { margin-left: 0; width: 100%; }
    #map { margin-top: 30px; }
    #map iframe { height: 320px; }

    /* --- rodapé --- */
    .footer-dark .footer-top { padding: 26px 0; margin-bottom: 30px; }
    .footer-dark .footer-top > div { margin-bottom: 18px; }
    .footer-dark dl.footer-menu { margin-top: 26px; }
    .footer-dark figure.logo-footer { margin: 0 auto 18px; float: none; }
    /* folga para o botao flutuante do WhatsApp nao cobrir a ultima linha */
    .footer-dark .sub-footer { margin-top: 30px; padding-bottom: 60px; text-align: center; }
    .footer-dark .sub-footer .copyright { float: none; display: block; line-height: 1.6; }

    /* titulo e caminho lado a lado espremiam as duas colunas: no celular o
       caminho passa a ficar embaixo, alinhado a esquerda */
    .int-header { padding: 30px 0; }
    .int-header h2 { font-size: 25px; }
    .int-header .col-xs-5, .int-header .col-xs-7 { width: 100%; }

    .int-header ol.breadcrumb {
        float: none;
        font-size: 12px;
        margin-top: 8px;
        padding: 0;
    }

    .int-header ol.breadcrumb > li + li:before { padding: 0 10px; }
    .error-404 { padding: 55px 0; }
    .error-404 h2 { font-size: 25px; }
}

@media (max-width: 575px) {
    .consulting-form form { max-width: none; }
}

/* celulares estreitos */
@media (max-width: 480px) {
    .header .top-bar { font-size: 12px; }
    .so-titulo { font-size: 25px; }
    .section-title h3 { font-size: 23px; }
    .hero-slide {
    height: 375px;
  }
    .hero-slides:after { height: 210px; }
    .slider-overlay { padding: 140px 0 40px; }
    .hero-seta { top: 74px; }
    .form_simulacao .titulo { font-size: 19px; }
    .featured-cases figure figcaption a { font-size: 17px; }
    .footer-dark .footer-top address, .footer-dark .footer-top p { font-size: 13.5px; }
}

@media (max-width: 380px) {
    .tipo_produto { gap: 7px; }
    .tipo_produto .itens label { padding: 12px 3px 10px; font-size: 9.5px; letter-spacing: .05em; }
    .tipo_produto .itens label i { font-size: 22px; }
    .header .navbar-brand img { height: 50px; }
    .header .top-bar .timeline { font-size: 11.5px; }
    button.btn-simule-slide { font-size: 12px; padding: 14px 18px; }
}