/* ============================================================================
   NOTA SOBRE .pg-unidade-int

   As regras do hero abaixo valem para dois conjuntos de paginas:
   .pg-brasilia        as 12 paginas recuperacao-dados-hd-<slug>
   .pg-unidade-int     as 12 paginas nossas-unidades-<slug>

   O cliente pediu em 12/11/2026 que o hero das institucionais ficasse igual
   ao das novas. O markup ja era o mesmo (.box_banner_top com o formulario
   dentro, mesmas classes em form.php e form-brasilia.php); o que mudava era
   so este arquivo, que as institucionais nao carregavam.

   Os seletores foram duplicados em vez de copiados para outro arquivo, para
   nao existirem duas versoes do mesmo hero divergindo com o tempo.
   ============================================================================ */

/* ============================================================================
   Recovery Data - Brasilia (DF) | Sprint de melhorias de 10/11/2026
   Folha de estilo da versao de HOMOLOGACAO (-dev).

   Carregada DEPOIS de assets/style.css, apenas por
   recuperacao-dados-hd-brasilia-df-dev.php.

   Todas as regras estao presas a .pg-brasilia (classe do <body>), para que
   nenhuma pagina da producao seja afetada caso este arquivo seja carregado por
   engano em outro lugar.
   ============================================================================ */

/* --------------------------------------------------------------------------
   0. box-sizing
   O CSS do site e content-box: largura 100% mais padding lateral vira
   100% + padding. Com .sec_dev (width:100% + padding:0 16px) isso gerava
   32px de transbordo horizontal por secao no celular. O escopo abaixo cobre
   so o conteudo desta pagina, sem mexer no comportamento do resto do site.
   -------------------------------------------------------------------------- */
.pg-brasilia main,
.pg-brasilia main *,
.pg-brasilia main *::before,
.pg-brasilia main *::after,
.pg-brasilia .trilha_dev,
.pg-brasilia .trilha_dev * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Utilitarios de acessibilidade
   -------------------------------------------------------------------------- */
.pg-brasilia .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link escondido por clip, e nao por left:-9999px.
   A tecnica antiga deixa um elemento de ~190px fora da tela e faz a largura
   do viewport de layout divergir da largura visivel (innerWidth 506 contra
   clientWidth 448), o que empurrava o botao do menu para fora da tela. */
.pg-brasilia .pular-conteudo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.pg-brasilia .pular-conteudo:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    background: #c70100;
    color: #fff;
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 6px;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. Topo: linha vermelha fina no lugar da barra de telefones
   A barra antiga (.box_top, 116px) foi removida do HTML. A .top_bar, que no
   site de producao fica em top:50px para encaixar sob ela, sobe para logo
   abaixo da linha.
   -------------------------------------------------------------------------- */
.pg-brasilia .linha_topo_dev {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #c70100;
    z-index: 12;
}

.pg-brasilia .top_bar_dev {
    top: 4px;
}

/* O banner comecava em 166px (50 + 116 da barra antiga). Agora acompanha
   apenas a linha + a altura da .top_bar. */
.pg-brasilia .box_banner_top,
.pg-unidade-int .box_banner_top,
.pg-hero-novo .box_banner_top {
    margin-top: 120px;
}

@media (max-width: 1043px) {
    .pg-brasilia .top_bar_dev {
        top: 4px;
    }
    .pg-brasilia .box_banner_top,
.pg-unidade-int .box_banner_top,
.pg-hero-novo .box_banner_top {
        margin-top: 84px;
    }
}

/* --------------------------------------------------------------------------
   3. Telefone em destaque no lugar do botao "Fale Conosco"
   -------------------------------------------------------------------------- */
/* 58px e metade da .top_bar (116px). Nao se usa top:50% aqui porque o
   containing block e o .box_header, que tem 136px: centralizar nele deixava
   o telefone 10px abaixo do centro da barra. */
.pg-brasilia .box_fone_top_dev,
.pg-unidade-int .box_fone_top_dev {
    right: 10px;
    top: 58px;
    transform: translateY(-50%);
}

/* Badge do telefone preso ao fim do menu, e nao a borda direita.
   O <ul> do menu e centralizado e tem meia-largura constante de 387,5px,
   enquanto a borda direita se afasta junto com a tela: preso a direita, o
   badge ficava a 49px do menu em 1351px e a 326px em 1905px.
   Com left: 50% + 388px (fim do menu) + 36px de respiro, a distancia fica
   igual em qualquer largura.

   So a partir de 1341px, que e onde o menu de desktop aparece nesta pagina;
   abaixo disso vale o ancoramento a direita, senao o badge transborda.

   Se o menu ganhar ou perder itens, os 388px mudam junto. */
@media (min-width: 1341px) {
    .pg-brasilia .box_fone_top_dev,
.pg-unidade-int .box_fone_top_dev {
        left: calc(50% + 424px);
        right: auto;
    }
}

/* Logo reduzida em 15% na rodada de ajustes de 11/11/2026, e recentrada na
   altura da barra. A proporcao original (241x77) e mantida e o margin-top:16px
   do site e zerado, para o posicionamento ficar so no top.

   So no desktop: a barra do celular tem 80px e uma logo de 65px nao cabe
   com folga, entao la vale o tamanho original do site. */
@media (min-width: 1044px) {
    .pg-brasilia .logo a {
        width: 205px;
        height: 65px;
        margin-top: 0;
        top: 25px;
    }
}

/* Grid de duas linhas (rotulo em cima, numero embaixo) ao lado do icone.
   Com flex-wrap o bloco esticava para 385px e passava por cima do item
   "Politica de Gestao" do menu. */
.pg-brasilia .box_fone_top_dev .phone_top,
.pg-unidade-int .box_fone_top_dev .phone_top {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "icone rotulo"
        "icone numero";
    align-items: center;
    column-gap: 11px;
    width: auto;
    text-decoration: none;
    color: #1a1a1a;
    border: 2px solid #c70100;
    border-radius: 8px;
    padding: 9px 18px;
    line-height: 1.15;
    transition: background-color .2s ease, color .2s ease;
}
.pg-brasilia .box_fone_top_dev .phone_top:hover,
.pg-brasilia .box_fone_top_dev .phone_top:focus,
.pg-unidade-int .box_fone_top_dev .phone_top:hover,
.pg-unidade-int .box_fone_top_dev .phone_top:focus {
    background: #c70100;
    color: #fff;
}
.pg-brasilia .box_fone_top_dev .phone_top i,
.pg-unidade-int .box_fone_top_dev .phone_top i {
    grid-area: icone;
    font-size: 22px;
    color: #c70100;
    transition: color .2s ease;
}
.pg-brasilia .box_fone_top_dev .phone_top:hover i,
.pg-brasilia .box_fone_top_dev .phone_top:focus i,
.pg-unidade-int .box_fone_top_dev .phone_top:hover i,
.pg-unidade-int .box_fone_top_dev .phone_top:focus i {
    color: #fff;
}
.pg-brasilia .fone_top_dev_rotulo,
.pg-unidade-int .fone_top_dev_rotulo {
    grid-area: rotulo;
    display: block;
    margin: 0;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
    white-space: nowrap;
}
.pg-brasilia .fone_top_dev_numero,
.pg-unidade-int .fone_top_dev_numero {
    grid-area: numero;
    display: block;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3.2 Botao do menu compacto

   O breakpoint aqui e 1360px, e nao 1043px. O CSS do site esconde o menu de
   desktop (".navbar .nav") ate 1200px, e entre 1201 e 1360px ele aparece mas
   nao cabe ao lado da logo. Com um valor menor, essa faixa ficaria sem menu
   de desktop E sem o botao compacto, ou seja, sem navegacao nenhuma.

   Dois problemas herdados, ambos causados pela remocao da barra vermelha de
   telefones que o briefing pediu:
     1) o wrapper .navigation e fixed em left:5px/top:3px com fundo preto
        solido, onde antes ficava a barra vermelha; sem ela, caia sobre a logo;
     2) as barras do icone sao #eee, pensadas para aparecer sobre o vermelho,
        e sumiam no fundo branco da .top_bar.
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
    .pg-brasilia .nav_toggle_dev {
        /* absolute dentro da .top_bar_dev (que e fixed e serve de referencia),
           e nao fixed na viewport: assim o botao acompanha a largura real do
           cabecalho em vez da largura da janela. */
        position: absolute;
        left: auto;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        margin: 0;
        background: #15181f;
        border-radius: 9px;
        z-index: 999999;
    }
    .pg-brasilia .nav_toggle_dev #toggle {
        position: absolute;
        left: 50%;
        top: 50%;
        right: auto;
        transform: translate(-50%, -50%);
    }
    .pg-brasilia .nav_toggle_dev #toggle span,
    .pg-brasilia .nav_toggle_dev #toggle span::before,
    .pg-brasilia .nav_toggle_dev #toggle span::after {
        background: #ffffff;
    }
    .pg-brasilia .nav_toggle_dev #toggle.open span {
        background: transparent;
    }
}

/* Entre 1201 e 1320px o menu de desktop ja aparece (regra .navbar .nav do
   site), mas nao cabe: o <ul> tem ~795px e e centralizado na barra, entao o
   primeiro item entra por baixo da logo (medido: -37px de folga em 1235px).
   Reduzir fonte e padding nao resolveu, porque a largura vem do CSS do site.
   Nessa faixa a pagina usa o menu compacto, que cabe sempre. */
@media (min-width: 1201px) and (max-width: 1360px) {
    .pg-brasilia .box_menu {
        display: none;
    }
}

/* Acima de 1360px o menu de desktop cabe ao lado da logo e do telefone,
   e o botao compacto nao tem mais funcao. */
@media (min-width: 1361px) {
    .pg-brasilia .nav_toggle_dev {
        display: none;
    }
}

/* O badge do telefone e o botao compacto disputam o mesmo canto direito.
   Entre 1044px (onde o badge aparece) e 1360px (onde o botao ainda existe)
   os dois ficam visiveis, e o botao, sendo absolute com z-index 999999,
   cobria os ultimos caracteres do numero: medidos 26px de sobreposicao em
   1280px, o suficiente para esconder dois digitos.

   Defeito anterior a este template - vinha desde que a pagina de Brasilia
   foi ao ar, e o rollout so o espalhou para as 12 unidades.

   56px = 12px da borda ate o botao + 44px de botao; mais 14px de respiro.
   Esta regra vem depois do @media (min-width: 1341px) de proposito: nos
   1341-1360px que as duas faixas compartilham, quem vale e esta. */
@media (min-width: 1044px) and (max-width: 1360px) {
    .pg-brasilia .box_fone_top_dev,
.pg-unidade-int .box_fone_top_dev {
        right: 70px;
        left: auto;
    }
}

/* Em telas menores o telefone do topo sai: quem manda e a barra fixa
   do rodape e o item de telefone dentro do menu compacto. */
@media (max-width: 1043px) {
    .pg-brasilia .box_fone_top_dev,
.pg-unidade-int .box_fone_top_dev {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   3.1 Menu compacto aberto
   No site cada item do menu tem fundo preto a 70% definido inline, e o
   conteudo da pagina aparece por tras, atrapalhando a leitura. No header
   -dev esses estilos inline viraram a classe .item_menu_dev, e o painel
   inteiro passa a ser solido.
   -------------------------------------------------------------------------- */
.pg-brasilia #menu.opened {
    background: #0c0e14;
    /* O menu e fixed com height:100% e overflow visivel: com 12 itens, os
       ultimos (inclusive "Contato") ficavam fora da tela e sem como rolar
       em qualquer celular de altura normal. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.pg-brasilia #menu ul {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
.pg-brasilia #menu ul li,
.pg-brasilia #menu ul li a {
    box-sizing: border-box;
    width: 100%;
}
.pg-brasilia #menu .item_menu_dev {
    background-color: transparent;
    height: auto;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* 12 itens a 75px nao cabem numa tela de celular: a altura cai para ~52px,
   que ainda e um alvo de toque confortavel. */
.pg-brasilia #menu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    height: auto;
    margin: 0;
    padding: 10px 18px;
    line-height: 1.3;
}

/* Telefone como primeiro item do menu, em destaque */
.pg-brasilia #menu .menu_fone_mobile_dev {
    background-color: #c70100;
    height: auto;
}
.pg-brasilia #menu .menu_fone_mobile_dev a {
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    gap: 10px;
}
.pg-brasilia #menu .menu_fone_mobile_dev a i {
    position: static;
    margin: 0;
}

/* --------------------------------------------------------------------------
   4. Banner: fotografia com mais leveza, sem competir com o formulario
   O fundo e uma imagem unica aplicada em .box_banner_top. Em vez de escurecer
   a imagem inteira, a sobreposicao e um degrade: densa onde fica o texto e o
   formulario, quase transparente do outro lado, onde a foto respira.
   -------------------------------------------------------------------------- */
.pg-brasilia .box_banner_top,
.pg-unidade-int .box_banner_top,
.pg-hero-novo .box_banner_top {
    position: relative;
    isolation: isolate;
}

/* Sobreposicao clareada duas vezes. Em 11/11/2026 caiu cerca de 25%; em
   12/11/2026 o cliente pediu de novo - "da uma mudada e aparece mais o HD" -
   e caiu outros 45%.

   Da para clarear tanto porque a foto ja e escura justamente onde o texto
   fica. Medido na propria imagem: o bloco MAIS CLARO da faixa do texto e
   rgb(70,86,92); com a camada em 0.34 o branco ainda da 9,7:1 de contraste,
   contra o minimo de 4,5. O formulario tem o painel proprio, entao nao
   depende deste degrade. */
.pg-brasilia .box_banner_top::before,
.pg-unidade-int .box_banner_top::before,
.pg-hero-novo .box_banner_top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        rgba(8, 10, 18, .34) 0%,
        rgba(8, 10, 18, .26) 38%,
        rgba(8, 10, 18, .12) 68%,
        rgba(8, 10, 18, .04) 100%
    );
}

/* --------------------------------------------------------------------------
   4.1 Altura do hero e enquadramento da foto (ajustes de 11/11/2026)

   O hero tinha altura fixa de 850px mais 100px de padding, o que deixava
   167px de espaco morto abaixo do formulario e jogava o botao de envio para
   700px do topo. Agora a altura acompanha o conteudo.

   O fundo passa de background-attachment: fixed para scroll. Com fixed, o
   background-position e relativo a JANELA, nao ao elemento: o enquadramento
   mudava conforme a altura da tela e o HD ficava cortado pelo cabecalho.
   Com scroll o enquadramento e previsivel e da para apontar para o HD, que
   fica por volta de 56% na horizontal e 37% na vertical da imagem.
   -------------------------------------------------------------------------- */
@media (min-width: 1044px) {
    .pg-brasilia .box_banner_top,
.pg-unidade-int .box_banner_top,
.pg-hero-novo .box_banner_top {
        height: auto;
        min-height: 0;
        padding: 36px 0 58px;
        background-attachment: scroll;
        /* O HD aberto da foto ocupa a faixa 600..1400 na horizontal e 50..650
           na vertical da imagem original (1782x953).

           Com background-size:cover a imagem preenche exatamente a largura do
           hero e nao sobra folga para desloca-la, entao o HD caia bem atras do
           texto. Com 125% sobra folga horizontal e o HD vai para cerca de 70%
           da largura, com o lado direito dele livre do bloco de texto.

           125% e o maior zoom em que o HD ainda cabe inteiro na altura do
           hero: acima disso ele passa a ser cortado em cima e embaixo e deixa
           de ser reconhecivel. O valor e percentual, entao o enquadramento
           acompanha a largura da tela. */
        background-size: 125% auto;
        background-position: 0% 14%;
    }

    /* Espacos entre os blocos do hero, para o botao de envio subir.
       Somados, os quatro cortes abaixo recuperam cerca de 90px. */
    .pg-brasilia .txt_box_top,
.pg-unidade-int .txt_box_top,
.pg-hero-novo .txt_box_top {
        margin-top: 20px;
    }
    .pg-brasilia .box_banner_form,
.pg-unidade-int .box_banner_form,
.pg-hero-novo .box_banner_form {
        margin-top: 10px;
        padding-top: 18px;
    }
    .pg-brasilia #form-preos {
        margin-top: 14px;
    }
}

/* Todo o conteudo do banner fica acima da sobreposicao */
.pg-brasilia .box_banner_top > *,
.pg-unidade-int .box_banner_top > *,
.pg-hero-novo .box_banner_top > * {
    position: relative;
    z-index: 1;
}

/* iOS ignora background-attachment: fixed e deforma a imagem */
@media (max-width: 1043px) {
    .pg-brasilia .box_banner_top,
.pg-unidade-int .box_banner_top,
.pg-hero-novo .box_banner_top {
        background-attachment: scroll;
        background-position: center center;
    }
    /* Clareada junto com o desktop em 12/11/2026. No celular o texto corre
       sobre a foto na largura toda, sem um lado claro e outro escuro, entao
       o degrade continua vertical e um pouco mais denso embaixo, onde fica
       o painel do formulario. */
    .pg-brasilia .box_banner_top::before,
.pg-unidade-int .box_banner_top::before,
.pg-hero-novo .box_banner_top::before {
        background: linear-gradient(
            180deg,
            rgba(8, 10, 18, .32) 0%,
            rgba(8, 10, 18, .38) 100%
        );
    }
}

/* Painel do formulario: separa do fundo e garante contraste.
   O margin-top:-20px do site era invisivel enquanto o formulario nao tinha
   fundo; com o painel, ele passava a cobrir os ultimos 20px da linha
   "Inicie o Processo de Recuperacao da sua Midia". */
.pg-brasilia .box_banner_form,
.pg-unidade-int .box_banner_form,
.pg-hero-novo .box_banner_form {
    margin-top: 16px;
    background: rgba(12, 14, 22, .55);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 22px 22px 26px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.pg-brasilia .box_banner_form input[type="text"],
.pg-brasilia .box_banner_form input[type="email"],
.pg-unidade-int .box_banner_form input[type="text"],
.pg-unidade-int .box_banner_form input[type="email"],
.pg-hero-novo .box_banner_form input[type="text"],
.pg-hero-novo .box_banner_form input[type="email"] {
    border: 1px solid rgba(255, 255, 255, .22);
}
.pg-brasilia .box_banner_form input[type="text"]:focus,
.pg-brasilia .box_banner_form input[type="email"]:focus,
.pg-unidade-int .box_banner_form input[type="text"]:focus,
.pg-unidade-int .box_banner_form input[type="email"]:focus,
.pg-hero-novo .box_banner_form input[type="text"]:focus,
.pg-hero-novo .box_banner_form input[type="email"]:focus {
    outline: 3px solid #ffd3d3;
    outline-offset: 1px;
}
.pg-brasilia .box_banner_form .btn:focus,
.pg-unidade-int .box_banner_form .btn:focus,
.pg-hero-novo .box_banner_form .btn:focus {
    outline: 3px solid #ffd3d3;
    outline-offset: 2px;
}
/* Linha do aceite da LGPD.
   No CSS do site o .aceitecheckbox tem largura propria e float, o que joga a
   caixa para baixo e para a esquerda do texto. Aqui a linha vira flex, com
   caixa e texto no mesmo eixo. A faixa mobile refina os tamanhos mais abaixo. */
.pg-brasilia .form_checkbox,
.pg-unidade-int .form_checkbox,
.pg-hero-novo .form_checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    float: none;
    margin: 4px 0 14px;
    padding: 0;
    box-sizing: border-box;
}
.pg-brasilia .form_checkbox .aceitecheckbox,
.pg-unidade-int .form_checkbox .aceitecheckbox,
.pg-hero-novo .form_checkbox .aceitecheckbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 0;
    float: none;
    cursor: pointer;
}
/* O site aplica input[type="checkbox"] { transform: scale(1.7); padding:10px }.
   A caixa pintada fica 1,7x maior que a caixa de layout, entao o flex alinha
   por um tamanho e o olho ve outro. Aqui a escala e anulada e o tamanho passa
   a ser real. */
.pg-brasilia #aceiteCheckbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0;
    transform: none;
    accent-color: #c70100;
}
.pg-brasilia .txt_checkbox,
.pg-unidade-int .txt_checkbox,
.pg-hero-novo .txt_checkbox {
    flex: 0 1 auto;
    width: auto;
    float: none;
    margin: 0;
    line-height: 1.5;
    text-align: left;
}

/* --------------------------------------------------------------------------
   5. Botao flutuante do WhatsApp com rotulo no hover
   -------------------------------------------------------------------------- */
.pg-brasilia .btn_whatsapp_dev {
    position: relative;
}

.pg-brasilia .btn_whatsapp_dev::after {
    content: attr(data-rotulo);
    position: fixed;
    right: 118px;
    bottom: 42px;
    z-index: 999;
    background: #1f2430;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    padding: 9px 14px;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.pg-brasilia .btn_whatsapp_dev:hover::after,
.pg-brasilia .btn_whatsapp_dev:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.pg-brasilia .btn_whatsapp_dev a:focus {
    outline: 3px solid #25d366;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pg-brasilia .btn_whatsapp_dev::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   6. Trilha de navegacao (breadcrumbs)
   -------------------------------------------------------------------------- */
.pg-brasilia .trilha_dev {
    width: 100%;
    float: left;
    background: #f3f4f6;
    border-bottom: 1px solid #e3e5e9;
}
.pg-brasilia .trilha_dev ol {
    max-width: 1200px;
    margin: 0 auto;
    padding: 13px 20px;
    list-style: none;
    font-size: 14px;
    color: #5b6170;
}
.pg-brasilia .trilha_dev li {
    display: inline;
}
.pg-brasilia .trilha_dev li + li::before {
    content: "›";
    margin: 0 8px;
    color: #9aa0ad;
}
.pg-brasilia .trilha_dev a {
    color: #c70100;
    text-decoration: none;
}
.pg-brasilia .trilha_dev a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Conteudo da pagina
   -------------------------------------------------------------------------- */
.pg-brasilia .sec_dev,
.pg-unidade-int .sec_dev {
    width: 100%;
    float: left;
    padding: 58px 20px;
}

/* O cabecalho e fixo: sem isto, qualquer ancora ou foco de teclado para
   embaixo dele e o titulo da secao fica escondido. */
.pg-brasilia #conteudo-principal,
.pg-brasilia .sec_dev,
.pg-brasilia main h2,
.pg-brasilia main h3,
.pg-unidade-int #conteudo-principal,
.pg-unidade-int .sec_dev,
.pg-unidade-int main h2,
.pg-unidade-int main h3 {
    scroll-margin-top: 100px;
}
.pg-brasilia .sec_dev_cinza,
.pg-unidade-int .sec_dev_cinza {
    background: #f7f8fa;
}
.pg-brasilia .wrap_dev,
.pg-unidade-int .wrap_dev {
    max-width: 1100px;
    margin: 0 auto;
}

.pg-brasilia .wrap_dev h1,
.pg-unidade-int .wrap_dev h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: #15181f;
    margin-bottom: 10px;
    /* distribui as linhas do titulo de forma mais equilibrada nos
       navegadores que suportam; onde nao houver, nada muda */
    text-wrap: balance;
}
.pg-brasilia .wrap_dev h2,
.pg-unidade-int .wrap_dev h2 {
    font-size: 29px;
    font-weight: 700;
    line-height: 1.25;
    color: #15181f;
    margin: 0 0 18px;
}
.pg-brasilia .wrap_dev h3,
.pg-unidade-int .wrap_dev h3 {
    font-size: 20px;
    font-weight: 700;
    color: #15181f;
}
.pg-brasilia .wrap_dev p,
.pg-unidade-int .wrap_dev p {
    font-size: 17px;
    line-height: 1.72;
    color: #3a3f4b;
    margin-bottom: 17px;
}
.pg-brasilia .wrap_dev p strong,
.pg-unidade-int .wrap_dev p strong {
    color: #15181f;
}

.pg-brasilia .subtitulo_dev {
    font-size: 19px;
    line-height: 1.6;
    color: #5b6170;
    margin-bottom: 26px;
}

/* No desktop o wrap tem 1100px: para texto corrido isso da ~130 caracteres
   por linha, bem acima do confortavel. Os blocos de leitura ganham uma
   medida menor; titulos, cards, mapa e bloco de contato seguem na largura
   cheia. */
@media (min-width: 1044px) {
    .pg-brasilia .wrap_dev > p,
    .pg-brasilia .subtitulo_dev,
    .pg-brasilia .passos_dev,
.pg-unidade-int .wrap_dev > p,
    .pg-unidade-int .subtitulo_dev,
    .pg-unidade-int .passos_dev {
        max-width: 860px;
    }
}

.pg-brasilia .barra_titulo_dev {
    display: block;
    width: 64px;
    height: 4px;
    background: #c70100;
    margin-bottom: 22px;
}

/* Cartoes de dispositivos atendidos.
   Sao 6 cards: em 3 colunas fecham 3+3. Com auto-fit davam 4+2, que fica
   desequilibrado. */
.pg-brasilia .grade_dev {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 10px;
}
.pg-brasilia .card_dev {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e5e9;
    border-top: 4px solid #c70100;
    border-radius: 9px;
    padding: 24px 22px 22px;
    text-align: center;
    align-items: center;
}
.pg-brasilia .card_icone_dev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #fdecec;
    color: #c70100;
    font-size: 24px;
    flex-shrink: 0;
}
.pg-brasilia .card_dev h3 {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.3;
}
.pg-brasilia .card_dev p {
    font-size: 15.5px;
    line-height: 1.62;
    margin-bottom: 0;
    color: #4a4f5c;
}

/* Duas colunas na faixa intermediaria, para os cards nao ficarem estreitos */
@media (max-width: 900px) {
    .pg-brasilia .grade_dev {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Passo a passo */
.pg-brasilia .passos_dev {
    counter-reset: passo;
    list-style: none;
    margin-top: 6px;
}
.pg-brasilia .passos_dev li {
    counter-increment: passo;
    position: relative;
    padding: 0 0 22px 60px;
    font-size: 17px;
    line-height: 1.68;
    color: #3a3f4b;
}
.pg-brasilia .passos_dev li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: -2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #c70100;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pg-brasilia .passos_dev li strong {
    display: block;
    color: #15181f;
    margin-bottom: 2px;
}

/* O link do passo 1 leva ao formulario do topo da pagina. Sem regra propria
   ele herda um cinza (#646464) mais claro que o proprio texto do item
   (#3a3f4b) e passa por texto desbotado. Aqui recebe a cor da marca, peso e
   sublinhado, para nao se distinguir apenas pela cor. */
.pg-brasilia .passos_dev li a {
    color: #c70100;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.pg-brasilia .passos_dev li a:hover,
.pg-brasilia .passos_dev li a:focus-visible {
    color: #9c0100;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   7.1 Abertura em duas colunas
   O texto corrido sozinho nao sustenta a pagina: a coluna da direita traz o
   contato e os pontos de atendimento logo no inicio.
   -------------------------------------------------------------------------- */
.pg-brasilia .abertura_dev {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 350px;
    gap: 44px;
    align-items: start;
}
.pg-brasilia .abertura_texto_dev h1 {
    margin-top: 0;
}
.pg-brasilia .abertura_texto_dev p:last-child {
    margin-bottom: 0;
}

.pg-brasilia .abertura_painel_dev {
    background: #15181f;
    border-radius: 12px;
    padding: 26px 24px;
    position: sticky;
    top: 136px;
}
.pg-brasilia .painel_rotulo_dev {
    margin: 0 0 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-align: center;
    color: #ff6b6b;
}
.pg-brasilia .painel_fone_dev {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #c70100;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .18s ease;
}
.pg-brasilia .painel_whats_dev {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid #25d366;
    color: #25d366;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}
.pg-brasilia .painel_fone_dev:hover,
.pg-brasilia .painel_fone_dev:focus {
    filter: brightness(1.12);
}
.pg-brasilia .painel_whats_dev:hover,
.pg-brasilia .painel_whats_dev:focus {
    background: #25d366;
    color: #06371a;
}

.pg-brasilia .painel_itens_dev {
    list-style: none;
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .13);
}
.pg-brasilia .painel_itens_dev li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 11px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #c6cad3;
}
.pg-brasilia .painel_itens_dev li:last-child {
    margin-bottom: 0;
}
.pg-brasilia .painel_itens_dev i {
    margin-top: 3px;
    font-size: 12px;
    color: #25d366;
    flex-shrink: 0;
}

.pg-brasilia .painel_endereco_dev,
.pg-unidade-int .painel_endereco_dev {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .13);
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.6;
    color: #9aa0ad;
}

/* Abaixo do breakpoint o painel vira um bloco normal, depois do texto */
@media (max-width: 1043px) {
    .pg-brasilia .abertura_dev {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .pg-brasilia .abertura_painel_dev {
        position: static;
    }
}

/* --------------------------------------------------------------------------
   7.2 Blocos lado a lado (HD e SSD)
   -------------------------------------------------------------------------- */
.pg-brasilia .duplo_dev {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 24px 0 26px;
}
.pg-brasilia .bloco_dev {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 9px;
    padding: 22px 24px;
}
.pg-brasilia .bloco_dev h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eceef1;
    font-size: 18px;
}
.pg-brasilia .bloco_dev h3 i {
    color: #c70100;
    font-size: 19px;
}
.pg-brasilia .lista_dev {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pg-brasilia .lista_dev li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 9px;
    font-size: 15.5px;
    line-height: 1.55;
    color: #4a4f5c;
}
.pg-brasilia .lista_dev li:last-child {
    margin-bottom: 0;
}
.pg-brasilia .lista_dev li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c70100;
}

/* Aviso importante.
   O icone fica dentro do titulo (bloco), e nao como coluna de um flex: assim
   o texto do aviso ocupa a largura inteira do card, inclusive no celular. */
.pg-brasilia .alerta_dev {
    display: block;
    background: #fff6f6;
    border: 1px solid #f2c9c9;
    border-left: 4px solid #c70100;
    border-radius: 9px;
    padding: 22px 24px;
    margin-top: 8px;
}
.pg-brasilia .alerta_titulo_dev {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #15181f;
}
.pg-brasilia .alerta_icone_dev {
    flex-shrink: 0;
    font-size: 21px;
    color: #c70100;
}
.pg-brasilia .alerta_dev p:last-child {
    margin-bottom: 0;
}

/* Bloco de contato */
.pg-brasilia .contato_dev,
.pg-unidade-int .contato_dev {
    background: #15181f;
    border-radius: 12px;
    padding: 40px 34px;
    text-align: center;
}
.pg-brasilia .contato_dev h2,
.pg-unidade-int .contato_dev h2 {
    color: #fff;
}
.pg-brasilia .contato_dev p,
.pg-unidade-int .contato_dev p {
    color: #c6cad3;
    max-width: 680px;
    margin: 0 auto 26px;
}
.pg-brasilia .acoes_dev,
.pg-unidade-int .acoes_dev {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.pg-brasilia .acao_dev,
.pg-unidade-int .acao_dev {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .18s ease;
}
.pg-brasilia .acao_dev:hover,
.pg-unidade-int .acao_dev:hover {
    filter: brightness(1.1);
}
.pg-brasilia .acao_dev:focus,
.pg-unidade-int .acao_dev:focus {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.pg-brasilia .acao_fone_dev,
.pg-unidade-int .acao_fone_dev {
    background: #c70100;
    color: #fff;
}
.pg-brasilia .acao_whats_dev,
.pg-unidade-int .acao_whats_dev {
    background: #25d366;
    color: #0b2e16;
}

/* Endereco da unidade */
.pg-brasilia .endereco_dev,
.pg-unidade-int .endereco_dev {
    /* <address> vem em italico por padrao do navegador */
    font-style: normal;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: center;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    color: #c6cad3;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}
.pg-brasilia .endereco_dev i,
.pg-unidade-int .endereco_dev i {
    color: #c70100;
    font-size: 22px;
    margin-top: 2px;
}

/* FAQ: usa o acordeon ja existente do site (assets/js/accordeon.js).
   O site da width:96% ao h3 (e 90% abaixo de 600px), o que deixava a pergunta
   quebrando cedo e sobrando espaco vazio a direita do card. Aqui ele ocupa a
   largura inteira; o recuo do "+" continua vindo do padding-left. */
.pg-brasilia .acordeon h3,
.pg-brasilia .acordeon > div {
    width: 100%;
}
.pg-brasilia .acordeon h3 {
    font-size: 17.5px;
    line-height: 1.45;
}
.pg-brasilia .acordeon p {
    font-size: 16.5px;
}

/* Links internos: centralizados, para a ultima linha nao ficar com um item
   solto na esquerda */
.pg-brasilia .links_internos_dev {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    list-style: none;
}
.pg-brasilia .links_internos_dev a {
    display: inline-block;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #d9dce2;
    border-radius: 40px;
    color: #c70100;
    font-size: 15px;
    text-decoration: none;
}
.pg-brasilia .links_internos_dev a:hover {
    border-color: #c70100;
}

/* ==========================================================================
   8. MOBILE
   99% do acesso da pagina e por celular, entao esta secao e a que manda.
   Medicoes feitas em 375 / 390 / 414 px.

   Problemas corrigidos aqui, todos medidos na pagina real:
     - o formulario comecava a 487px do topo, muito abaixo da primeira tela;
     - os campos tinham 15px de fonte, o que faz o iOS dar zoom ao focar;
     - o checkbox da LGPD tinha area de toque de 17x22px;
     - o link "Ligar" da barra fixa tinha 19px de altura util;
     - a barra fixa (88px) cobria o fim do rodape.
   ========================================================================== */
@media (max-width: 1043px) {

    /* ---- 8.1 Banner: trazer o formulario para a primeira tela ----
       O banner de producao tem altura fixa (820px) e padding-top de 100px,
       herdados do desktop. No celular isso empurra o formulario para fora da
       primeira tela. Aqui a altura passa a acompanhar o conteudo. */
    .pg-brasilia .box_banner_top,
.pg-unidade-int .box_banner_top,
.pg-hero-novo .box_banner_top {
        height: auto;
        min-height: 0;
        padding: 26px 0 34px;
    }

    .pg-brasilia .box_txt_banner,
.pg-unidade-int .box_txt_banner,
.pg-hero-novo .box_txt_banner {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 0 16px;
        margin: 0;
        font-size: 26px;
        line-height: 1.16;
        box-sizing: border-box;
    }

    .pg-brasilia .box_txt_banner .txt_inter,
.pg-unidade-int .box_txt_banner .txt_inter,
.pg-hero-novo .box_txt_banner .txt_inter {
        font-size: 26px;
    }

    .pg-brasilia .sub_tit_top,
.pg-unidade-int .sub_tit_top,
.pg-hero-novo .sub_tit_top {
        font-size: 20px;
        line-height: 1.3;
        margin-top: 4px;
    }

    .pg-brasilia .txt_box_top,
.pg-unidade-int .txt_box_top,
.pg-hero-novo .txt_box_top {
        font-size: 16px;
        line-height: 1.4;
        height: auto;
        margin: 14px 0 12px;
        padding: 0;
    }

    /* ---- 8.2 Formulario ---- */
    .pg-brasilia .box_banner_form,
.pg-unidade-int .box_banner_form,
.pg-hero-novo .box_banner_form {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 16px 14px 18px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .pg-brasilia .box_banner_form .box_columm,
    .pg-brasilia .box_banner_form .box_columm_full,
.pg-unidade-int .box_banner_form .box_columm,
    .pg-unidade-int .box_banner_form .box_columm_full,
.pg-hero-novo .box_banner_form .box_columm,
.pg-hero-novo .box_banner_form .box_columm_full {
        width: 100%;
        margin: 0 0 10px;
        box-sizing: border-box;
    }

    .pg-brasilia .box_banner_form label,
.pg-unidade-int .box_banner_form label,
.pg-hero-novo .box_banner_form label {
        width: 100%;
        display: block;
    }

    /* 16px e o minimo que impede o iOS de dar zoom ao focar o campo */
    .pg-brasilia .box_banner_form input[type="text"],
    .pg-brasilia .box_banner_form input[type="email"],
.pg-unidade-int .box_banner_form input[type="text"],
    .pg-unidade-int .box_banner_form input[type="email"],
.pg-hero-novo .box_banner_form input[type="text"],
.pg-hero-novo .box_banner_form input[type="email"] {
        width: 100%;
        height: 52px;
        font-size: 16px;
        padding: 14px 14px;
        border-radius: 7px;
        box-sizing: border-box;
    }

    .pg-brasilia .box_banner_form .btn,
.pg-unidade-int .box_banner_form .btn,
.pg-hero-novo .box_banner_form .btn {
        width: 100%;
        height: 56px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: .01em;
        border-radius: 7px;
        margin-top: 4px;
        box-sizing: border-box;
    }

    /* O botao do menu compacto e tratado na secao 3.2, que usa o breakpoint
       de 1130px (quando o site esconde o menu de desktop), e nao 1043px. */

    /* ---- Checkbox da LGPD ----
       O CSS do site da width:252px ao .aceitecheckbox e margens laterais de
       ~114px ao proprio checkbox, o que espremia o texto numa coluna de 76px.
       Aqui a linha volta a ser: caixa de 44px + texto ocupando o resto. */
    /* No celular o texto do aceite quebra em duas linhas. Centralizar a caixa
       no bloco inteiro a deixa no meio das duas linhas; o certo e alinhar
       pela PRIMEIRA linha, entao os dois lados comecam no topo. */
    .pg-brasilia .form_checkbox,
.pg-unidade-int .form_checkbox,
.pg-hero-novo .form_checkbox {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        float: none;
        margin: 4px 0 14px;
        padding: 0;
        text-align: left;
        box-sizing: border-box;
    }
    /* A area de toque continua com 44px, mas a caixa fica no topo dela, na
       altura da primeira linha do texto. */
    .pg-brasilia .form_checkbox .aceitecheckbox,
.pg-unidade-int .form_checkbox .aceitecheckbox,
.pg-hero-novo .form_checkbox .aceitecheckbox {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        height: 44px;
        margin: 0 0 -10px -10px;
        padding: 0;
        float: none;
        cursor: pointer;
    }
    .pg-brasilia #aceiteCheckbox {
        width: 20px;
        height: 20px;
        min-width: 20px;
        margin: 0;
        padding: 0;
        transform: none;
        accent-color: #c70100;
    }
    .pg-brasilia .txt_checkbox,
.pg-unidade-int .txt_checkbox,
.pg-hero-novo .txt_checkbox {
        flex: 1 1 auto;
        width: auto;
        float: none;
        margin: 0;
        font-size: 14.5px;
        line-height: 1.45;
        text-align: left;
    }

    /* O form de producao tem margin-top:40px, pensado para o banner alto do
       desktop; no celular vira um vazio no topo do painel. */
    .pg-brasilia #form-preos {
        margin-top: 12px;
    }

    .pg-brasilia .box_columm_msg,
.pg-unidade-int .box_columm_msg,
.pg-hero-novo .box_columm_msg {
        width: 100%;
        font-size: 14px;
    }

    /* ---- 8.3 Trilha de navegacao ----
       Quebra em duas linhas em vez de cortar o ultimo item na borda. */
    .pg-brasilia .trilha_dev ol {
        padding: 11px 16px;
        font-size: 13px;
        line-height: 1.6;
    }

    /* ---- 8.4 Barra fixa de contato ----
       No site ela vem com opacity:0.9, o que deixa o texto da pagina
       aparecendo por tras, e o botao de telefone num cinza-azulado apagado.
       Como o telefone e a conversao principal desta pagina, ele ganha o
       vermelho da marca e a barra fica opaca. */
    .pg-brasilia .d-mobile {
        display: flex;
        opacity: 1;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .22);
        /* respeita a faixa do indicador de home do iPhone */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .pg-brasilia .d-mobile .d-phone,
    .pg-brasilia .d-mobile .d-whats {
        flex: 1 1 50%;
        height: auto;
    }
    .pg-brasilia .d-mobile .d-phone {
        background: #c70100;
    }
    .pg-brasilia .d-mobile .d-whats {
        background: #25d366;
    }
    .pg-brasilia .d-mobile .d-whats a {
        color: #06371a;
    }
    .pg-brasilia .d-mobile .d-phone a,
    .pg-brasilia .d-mobile .d-whats a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 56px;
        margin: 0;
        padding: 9px 6px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        box-sizing: border-box;
    }

    /* O rodape nao pode terminar atras da barra fixa */
    .pg-brasilia .box_footer {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    /* O balao do WhatsApp e so para mouse */
    .pg-brasilia .btn_whatsapp_dev::after {
        display: none;
    }
}

/* ---- 8.5 Conteudo ---- */
@media (max-width: 768px) {
    .pg-brasilia .sec_dev,
.pg-unidade-int .sec_dev {
        padding: 36px 16px;
    }
    .pg-brasilia .wrap_dev h1,
.pg-unidade-int .wrap_dev h1 {
        font-size: 27px;
        line-height: 1.22;
    }
    .pg-brasilia .wrap_dev h2,
.pg-unidade-int .wrap_dev h2 {
        font-size: 22px;
        line-height: 1.28;
    }
    .pg-brasilia .wrap_dev h3,
.pg-unidade-int .wrap_dev h3 {
        font-size: 18px;
    }
    .pg-brasilia .wrap_dev p,
    .pg-brasilia .passos_dev li,
.pg-unidade-int .wrap_dev p,
    .pg-unidade-int .passos_dev li {
        font-size: 16.5px;
        line-height: 1.7;
    }
    .pg-brasilia .subtitulo_dev {
        font-size: 17px;
        margin-bottom: 18px;
    }

    .pg-brasilia .grade_dev {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .pg-brasilia .card_dev {
        padding: 18px 16px;
    }

    .pg-brasilia .passos_dev li {
        padding-left: 52px;
        padding-bottom: 20px;
    }
    .pg-brasilia .passos_dev li::before {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .pg-brasilia .alerta_dev {
        padding: 18px 16px;
        gap: 12px;
    }
    .pg-brasilia .alerta_icone_dev {
        font-size: 19px;
    }
    .pg-brasilia .alerta_titulo_dev {
        font-size: 16px;
    }
    .pg-brasilia .duplo_dev {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 20px 0 22px;
    }
    .pg-brasilia .bloco_dev {
        padding: 18px 16px;
    }
    .pg-brasilia .abertura_painel_dev {
        padding: 22px 18px;
    }
    .pg-brasilia .painel_fone_dev {
        font-size: 20px;
    }

    .pg-brasilia .contato_dev,
.pg-unidade-int .contato_dev {
        padding: 30px 18px;
        border-radius: 10px;
    }
    .pg-brasilia .acoes_dev,
.pg-unidade-int .acoes_dev {
        flex-direction: column;
        gap: 12px;
    }
    /* "Atendimento pelo WhatsApp" nao cabe em 17px numa tela de 360px e
       quebrava em duas linhas. Fonte e respiro lateral menores resolvem sem
       encurtar o texto. */
    .pg-brasilia .acao_dev,
.pg-unidade-int .acao_dev {
        width: 100%;
        min-height: 56px;
        justify-content: center;
        gap: 8px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 15.5px;
    }
    .pg-brasilia .acao_fone_dev,
.pg-unidade-int .acao_fone_dev {
        font-size: 19px;
    }
    .pg-brasilia .endereco_dev,
.pg-unidade-int .endereco_dev {
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 15px;
    }

    /* Perguntas frequentes: o cabecalho do acordeao e um alvo de toque */
    .pg-brasilia .acordeon h3 {
        font-size: 16.5px;
        line-height: 1.45;
        min-height: 52px;
        display: flex;
        align-items: center;
    }
    .pg-brasilia .acordeon p {
        font-size: 16px;
        line-height: 1.65;
    }

    .pg-brasilia .links_internos_dev a {
        font-size: 14.5px;
        padding: 11px 16px;
    }

    /* O mapa da unidade precisa caber na tela */
    .pg-brasilia .wrap_dev iframe,
.pg-unidade-int .wrap_dev iframe {
        width: 100% !important;
        height: 320px !important;
        display: block;
    }
}

/* Telas bem estreitas (360px e abaixo) */
@media (max-width: 374px) {
    .pg-brasilia .box_txt_banner,
.pg-unidade-int .box_txt_banner,
.pg-hero-novo .box_txt_banner {
        font-size: 23px;
    }
    .pg-brasilia .box_txt_banner .txt_inter,
.pg-unidade-int .box_txt_banner .txt_inter,
.pg-hero-novo .box_txt_banner .txt_inter {
        font-size: 23px;
    }
    .pg-brasilia .sub_tit_top,
.pg-unidade-int .sub_tit_top,
.pg-hero-novo .sub_tit_top {
        font-size: 18px;
    }
    .pg-brasilia .wrap_dev h1,
.pg-unidade-int .wrap_dev h1 {
        font-size: 24px;
    }
    .pg-brasilia .d-mobile .d-phone a,
    .pg-brasilia .d-mobile .d-whats a {
        font-size: 13.5px;
    }
}

/* --------------------------------------------------------------------------
   Logo acompanhando o menu em telas largas (mesma ideia do site)

   Aqui a logo tem 205px, e nao 241px, por causa da reducao de 15% feita em
   11/11/2026. Dai o valor ser 50% - 415 - 40 - 205 = 50% - 660px.

   So a partir de 1440px: abaixo disso a logo em left:20px ja fica a 40px do
   menu em 1361px, que e onde o menu de desktop aparece nestas paginas.
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .pg-brasilia .logo a {
        left: calc(50% - 660px);
    }
}

/* ==========================================================================
   AJUSTES DAS PAGINAS nossas-unidades-<slug>   (12/11/2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   box-sizing

   O bloco 0 deste arquivo cobre .pg-brasilia main, mas nas paginas
   institucionais nao existe <main>: a secao de contato fica solta no body.
   Sem border-box, .sec_dev (width:100% + padding lateral) transbordava 40px,
   medido em 1440px: secao de 1465 contra 1425 de viewport.
   -------------------------------------------------------------------------- */
.pg-unidade-int .sec_dev,
.pg-unidade-int .sec_dev *,
.pg-unidade-int .sec_dev *::before,
.pg-unidade-int .sec_dev *::after {
    box-sizing: border-box;
}
/* O hero fica DE FORA de proposito. Nas paginas de recuperacao ele tambem e
   content-box - o bloco 0 cobre ".pg-brasilia main" e o hero esta fora do
   <main>. Com border-box aqui, o .box_banner_form passava de 546px para
   500px e o formulario ficava visivelmente menor que o das paginas novas,
   que era justamente o que se queria igualar. */

/* --------------------------------------------------------------------------
   Faixa "Nossas Unidades"

   Somava cerca de 500px de altura para exibir um titulo: 210px de
   padding-top no texto, mais 150px de imagem e 65px de padding no
   .back_top_int, mais 100px de margem acima. Com o hero novo logo acima e o
   bloco de contato logo abaixo, essa faixa virou um vazio enorme no meio.

   Fica como uma tarja de titulo: a mesma imagem de fundo, 150px de altura,
   e a forma diagonal branca sai - naquela altura ela cobriria o proprio
   titulo.
   -------------------------------------------------------------------------- */
.pg-unidade-int .box_top_int_ltion {
    margin-top: 0;
    background-attachment: scroll;   /* fixed em faixa baixa treme ao rolar */
    background-position: center 35%;
}

.pg-unidade-int .tit_top_int {
    font-size: 30px;
    line-height: 1.25;
    padding-top: 52px;
    padding-bottom: 52px;
}

.pg-unidade-int .back_top_int {
    display: none;
}

@media (max-width: 1043px) {
    .pg-unidade-int .tit_top_int {
        font-size: 24px;
        padding-top: 34px;
        padding-bottom: 34px;
    }
}

/* --------------------------------------------------------------------------
   Endereco do bloco de contato em uma linha no desktop

   O markup trazia um <br> fixo entre a rua e o bairro/cidade/CEP, entao o
   endereco quebrava em duas linhas mesmo sobrando espaco. Agora sao dois
   spans: no desktop eles ficam na mesma linha, separados por um ponto
   medio, e no celular voltam a ser duas linhas.

   Nao se usa white-space: nowrap de proposito. O endereco de Brasilia tem
   84 caracteres ("SRTVS Quadra 701, Conjunto L, Bloco 01 - Sala 533, Parte
   1093 - Ed. Assis Chateaubriand") e, proibido de quebrar, estouraria o
   cartao. Sem a quebra forcada ele ocupa uma linha so em todas as outras
   cidades e quebra naturalmente onde precisa.
   -------------------------------------------------------------------------- */
.pg-brasilia .end_resto::before,
.pg-unidade-int .end_resto::before {
    content: " \00b7 ";
}

@media (max-width: 1043px) {
    .pg-brasilia .end_rua,
    .pg-unidade-int .end_rua,
    .pg-brasilia .end_resto,
    .pg-unidade-int .end_resto {
        display: block;
    }
    .pg-brasilia .end_resto::before,
    .pg-unidade-int .end_resto::before {
        content: none;
    }
}

/* --------------------------------------------------------------------------
   Topo das institucionais: tarja + nome da cidade   (12/11/2026, 2a volta)

   A primeira tentativa so encolheu a faixa original, e ficou ruim: a foto
   de mapa em 142px de altura vira um borrao esverdeado com texto branco
   por cima, sem contraste nem assunto reconhecivel. Logo abaixo vinha uma
   faixa cinza repetindo cidade e endereco - que aparecem de novo no cartao
   de contato, poucos centimetros adiante.

   Agora sao duas partes com papeis distintos:

   1. tarja escura fina, so com o nome da secao em caixa alta pequena. Serve
      de respiro entre o hero e o conteudo, sem disputar atencao.
   2. o nome da cidade como titulo de verdade, sobre branco, com o endereco
      logo abaixo em cinza. E a primeira informacao que o visitante procura
      ao abrir a pagina de uma unidade.

   A foto sai: em faixa baixa ela nao se le, e o fundo escuro conversa com o
   cartao de contato e com o rodape.
   -------------------------------------------------------------------------- */
.pg-unidade-int .box_top_int_ltion {
    background-image: none;
    background-color: #15181f;
    background-attachment: scroll;
    margin-top: 0;
}

.pg-unidade-int .tit_top_int {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9aa0ac;
    line-height: 1.2;
    padding-top: 22px;
    padding-bottom: 22px;
}

.pg-unidade-int .back_top_int {
    display: none;
}

.pg-unidade-int .box_gray_int {
    background-color: #ffffff;
    border-bottom: 1px solid #e6e3e1;
    padding-top: 0;
    padding-bottom: 0;
}

.pg-unidade-int .sub_tit_int {
    width: 100%;
    max-width: 820px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 36px 16px 32px;
    font-size: 32px;
    line-height: 1.2;
    color: #1b1d22;
    font-weight: 700;
}

.pg-unidade-int .sub_tit_int strong {
    display: block;
    font-weight: 700;
}

.pg-unidade-int .txt_tit_loct {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #6b6f78;
    margin-top: 10px;
}

@media (max-width: 1043px) {
    .pg-unidade-int .tit_top_int {
        font-size: 11px;
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .pg-unidade-int .sub_tit_int {
        padding: 26px 16px 24px;
        font-size: 24px;
    }
    .pg-unidade-int .txt_tit_loct {
        font-size: 14.5px;
    }
}

/* O acionador GA4-Telefone Top do Tag Manager compara a classe do elemento
   clicado com "phone_top", inteira e exata. Se o clique cair no icone ou num
   dos spans, a classe lida e a deles e o disparo se perde - por isso os
   filhos nao recebem clique. */
.box_fone_top_dev .phone_top i,
.box_fone_top_dev .phone_top span {
    pointer-events: none;
}