/* ===== Abas da home (vc_tta nativo) — cores da marca GynProg =====
   Azul institucional #2C4D90 = cor medida no logo oficial (26/07/2026);
   #1B3E87 é o tom escuro da própria arte, usado em hover/ativo.
   !important necessário: o stylesheet do js_composer carrega depois deste e
   define as mesmas propriedades com igual especificidade. */
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-tabs-list .vc_tta-tab > a {
    background-color: #2C4D90 !important;
    color: #fff !important;
    font-weight: 700;
}
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-tabs-list .vc_tta-tab:hover > a,
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-tabs-list .vc_tta-tab.vc_active > a {
    background-color: #1B3E87 !important;
    color: #fff !important;
}
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-panels {
    background-color: transparent !important;
    border-color: transparent !important;
}
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-panel-body {
    padding-left: 0;
    padding-right: 0;
}
/* Abas ocupam a largura toda, ícone acima do título (como o layout original) */
.vc_tta-tabs .vc_tta-tabs-list {
    display: flex !important;
    width: 100%;
}
.vc_tta-tabs .vc_tta-tabs-list .vc_tta-tab {
    flex: 1 1 0;
    text-align: center;
    margin: 0;
}
.vc_tta-tabs .vc_tta-tabs-list .vc_tta-tab > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
}
.vc_tta-tabs .vc_tta-tabs-list .vc_tta-tab .vc_tta-icon {
    font-size: 30px;
    margin: 0;
}
/* Accordion (mobile) do mesmo componente: mesmas cores */
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-panel-heading {
    background-color: #2C4D90 !important;
}
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-panel.vc_active .vc_tta-panel-heading,
.vc_tta.vc_tta-color-blue.vc_tta-style-flat .vc_tta-panel-heading:hover {
    background-color: #1B3E87 !important;
}
/* ===== Slider de banners da home ([gynprog_banner_slider]) ===== */
.gyn-slider-wrap { position: relative; width: 100%; line-height: 0; }
.gyn-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gyn-slider::-webkit-scrollbar { display: none; }
.gyn-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gyn-slide picture, .gyn-slide img { width: 100%; height: auto; display: block; }
/* O slide inteiro é o alvo do clique: num banner de 1920x400 um botão isolado
   seria alvo pequeno demais para a área mais nobre da página. O contorno fica
   para dentro (offset negativo) porque o slide encosta na borda do viewport. */
.gyn-slide a.gyn-slide-link { display: block; line-height: 0; }
.gyn-slide a.gyn-slide-link:focus-visible { outline: 3px solid #ffffff; outline-offset: -6px; }
.gyn-dots {
    position: absolute; left: 0; right: 0; bottom: 12px;
    display: flex; justify-content: center; gap: 8px; z-index: 2;
}
.gyn-dots button {
    width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0;
    background: rgba(255,255,255,.6); cursor: pointer; transition: background .2s;
}
.gyn-dots button.on { background: #2C4D90; }
/* ===== Visibilidade por dispositivo (substitui o ult_hide_row do Ultimate removido) =====
   Corte em 992px, não em 768: o WPBakery esconde colunas com vc_hidden-sm de
   768 a 991px. Com o corte antigo, essa faixa inteira (tablets) ficava sem as
   versões de celular E com as colunas de desktop ocultas — auditoria da home
   media 1.342px de conteúdo em 768px contra 2.664px em 767px e 3.387px em
   992px, ou seja, metade da página desaparecia. Agora: até 991px vale a versão
   de celular; de 992px em diante, a de desktop. */
@media (min-width: 992px) { .gyn-hide-desktop { display: none !important; } }
@media (max-width: 991px) { .gyn-hide-mobile { display: none !important; } }
/* A regra que escondia a faixa de selos de desktop abaixo de 992px saiu em
   28/07: a faixa virou peca unica (gyn-faixa-confianca) e a mesma marcacao
   serve todas as larguras. Mantida, ela apagaria a faixa no celular. */
/* Imagens quebradas (uploads 2019/2020 perdidos): esconder até as mídias voltarem */
.gyn-img-broken { display: none !important; }
/* E4: vão de 700px do vídeo de fundo de 2019 (row com el_class ALTURA na home) */
.home .vc_row.ALTURA { display: none !important; }
/* E5/E20: seções escuras (fundos que eram do Ultimate removido) */
.vc_row.gyn-secao-escura {
    background-color: #0f3560 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
/* E15: faixas da home — selos de confiança (#252525) e faixa PRODUTOS (#2C4D90) */
.vc_row.gyn-faixa-escura {
    background-color: #252525 !important;
    padding-top: 20px;
    padding-bottom: 12px;
}
.vc_row.gyn-faixa-azul {
    background-color: #2C4D90 !important;
    padding-top: 28px;
}
.gyn-faixa-escura h1, .gyn-faixa-escura h2, .gyn-faixa-escura h3, .gyn-faixa-escura h4,
.gyn-faixa-escura h5, .gyn-faixa-escura p, .gyn-faixa-escura span, .gyn-faixa-escura strong,
.gyn-faixa-azul h1, .gyn-faixa-azul h2, .gyn-faixa-azul h3, .gyn-faixa-azul h4,
.gyn-faixa-azul h5, .gyn-faixa-azul p, .gyn-faixa-azul span, .gyn-faixa-azul strong {
    color: #fff !important;
}
/* ===== Faixa de confianca da home — reescrita em 28/07/2026 =====
   Substitui a faixa de tres selos (NOTA FISCAL / GARANTIA / ENTREGA RAPIDA
   PARA TODO BRASIL). Os tres eram obrigacao legal: nao separavam a GynProg de
   nenhum concorrente formal. Entram quatro provas, e o titulo deixa de ser
   etiqueta de categoria.

   O bloco de reorganizacao de 26/07 foi retirado daqui inteiro: ele existia
   para posicionar as duas colunas da row antiga e a pilha #DSKTP do celular,
   e nenhuma das duas estruturas existe mais.

   Cores medidas sobre #252525, todas ja em uso no site:
     #8FB4EA (o azul do Bloco F) = 7,21:1   — acento, filete e icones
     branco a 80%                = 10,24:1  — linhas de apoio, como no B.4
     branco a 85%                = 11,7:1   — subtitulo
   O #7ea2f0 do comparativo mede 6,07:1 e passaria, mas seria um quarto azul
   no site depois de 26/07 ter fechado 38 opcoes do tema no #2C4D90.

   Cor declarada com !important e sob .gyn-faixa-escura porque a lista de
   seletores de fundo escuro logo acima pinta h2/h3/p/span de branco com
   !important — foi assim que a legenda saiu preta sobre azul no Bloco F. */
.vc_row.gyn-faixa-confianca {
    padding-top: 56px !important;    /* B.4: padding simetrico; eram 20px em cima e 12px embaixo */
    padding-bottom: 56px !important;
}
/* A10 — o padding da faixa ja era simetrico em 56/56. O vao a mais embaixo
   nao era dela: o Betheme poe margin-bottom: 35px em .wpb_content_element, e
   a faixa inteira e um .wpb_text_column. Medido antes: 56px do topo ao titulo
   contra 91px da ultima linha de apoio ate o fim. Reduzir o padding-bottom,
   como o estudo pedia, deixaria a faixa torta e manteria os 35px no lugar. */
.vc_row.gyn-faixa-confianca .wpb_text_column { margin-bottom: 0; }
.gyn-faixa-escura .gyn-conf {
    max-width: 1220px;
    margin: 0 auto;
    text-align: center;
}
.gyn-faixa-escura .gyn-conf-titulo {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .005em;
    text-transform: uppercase;   /* caixa alta pelo CSS: o leitor de tela recebe a palavra escrita */
    text-wrap: balance;
    margin: 0 0 16px;
}
.gyn-faixa-escura .gyn-conf-desde { color: #8FB4EA !important; }
.gyn-faixa-escura .gyn-conf-filete {
    width: 64px;
    height: 3px;
    background: #8FB4EA;
    margin: 0 auto 16px;
}
.gyn-faixa-escura .gyn-conf-sub {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,.85) !important;
    max-width: 720px;
    margin: 0 auto;
    text-wrap: pretty;
}
.gyn-faixa-escura .gyn-conf-grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    list-style: none;
    margin: 40px 0 0;
    padding: 34px 0 0;
    border-top: 1px solid rgba(255,255,255,.12);
}
/* lista de verdade (quatro itens irmaos), sem a marcacao de lista do tema:
   dentro de .wpb_text_column o Betheme desenha um chevron em li:before. */
.gyn-faixa-escura .gyn-conf-item {
    margin: 0;
    padding: 0 6px;
    list-style: none;
    background: none;
    text-indent: 0;
}
.gyn-faixa-escura .gyn-conf-item:before { content: none !important; display: none !important; }
.gyn-faixa-escura .gyn-conf-icone {
    width: 34px;
    height: 34px;
    display: block;
    margin: 0 auto 13px;
    fill: none;
    stroke: #8FB4EA;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.gyn-faixa-escura .gyn-conf-rotulo {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff !important;
    margin: 0 0 7px;
    /* 14px x 1,35 x 2 = 37,8: reserva duas linhas para o rotulo, senao a linha
       de apoio de quem nao quebra sobe e as quatro colunas desalinham. */
    min-height: 38px;
}
.gyn-faixa-escura .gyn-conf-apoio {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255,255,255,.80) !important;
    margin: 0;
    text-wrap: pretty;
}
/* A7 — a reserva de duas linhas so serve onde o rotulo pode quebrar. Medido:
   a coluna vai de 226,5px em 1024 para 278px em 1366, e o rotulo mais longo
   (GARANTIA ACIONADA NO BRASIL) para de quebrar por volta de 1180px. Dai para
   cima os quatro cabem em uma linha e a reserva vira 19px de vao morto, que e
   o defeito relatado: 13px do icone ao rotulo contra 26,1px do rotulo a linha
   de apoio — proximidade invertida. Soltando a reserva, volta a 13 e 7.
   Abaixo de 1240px ela fica, porque e o que mantem as quatro linhas de apoio
   na mesma altura quando um rotulo quebra e os outros nao. */
@media (min-width: 1240px) {
    .gyn-faixa-escura .gyn-conf-rotulo { min-height: 0; }
}
/* 992px e o corte responsivo do site desde 26/07. Quatro itens em 2x2 ficam
   simetricos; a decisao de empilhar um por linha era de quando eram tres. */
@media (max-width: 991px) {
    .vc_row.gyn-faixa-confianca {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .gyn-faixa-escura .gyn-conf-titulo { font-size: 26px; }
    .gyn-faixa-escura .gyn-conf-grade {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
        margin-top: 32px;
        padding-top: 28px;
    }
}
@media (max-width: 575px) {
    .gyn-faixa-escura .gyn-conf-titulo { font-size: 22px; }
    .gyn-faixa-escura .gyn-conf-sub { font-size: 15px; }
    /* medido em 390px: a coluna cai para 165px e GARANTIA ACIONADA NO BRASIL
       passa a ocupar tres linhas enquanto as outras tres ficam em duas. Sem
       reserva de tres linhas, a linha de apoio da vizinha sobe 18,9px e o par
       desalinha. 3 x 18,9 = 56,7. */
    .gyn-faixa-escura .gyn-conf-rotulo { min-height: 57px; }
}
/* B3 — texto de apoio fixo do campo. O placeholder some quando a pessoa
   comeca a digitar, e e nele que estava o formato esperado do telefone; este
   fica. Vem depois do rotulo e antes do campo, que e onde o olho passa. */
.gyn-ajuda {
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    opacity: .8;
    margin: 2px 0 6px;
}
/* B6 — horario de atendimento abaixo do botao. NAO e promessa de prazo de
   resposta: e fato verificavel, e o mesmo que esta no rodape. */
.gyn-horario {
    font-size: 14px;
    margin: 12px 0 0;
    opacity: .85;
}
/* C2 — barra legal do rodape. */
.gyn-legal a { text-decoration: underline; }

/* ===== Bloco C — grade de marcas (28/07/2026) =====
   Substitui duas tiras de abas: uma de 8 marcas no desktop e outra de 5 no
   celular. Medido antes: as 8 caixas tinham 149px cada, e a proporcao das
   logos vai de 1,08:1 (GYS) a 7,50:1 (Thinkcar) — 6,9 vezes. Nao existe tira
   de largura igual que acomode as duas: por isso caixa de proporcao fixa, e a
   logo se encaixa dentro dela por object-fit.
   A lista tambem estava fixa no codigo, e por isso DIAGCAR e VIDENT, que tem
   produto publicado, nao apareciam. Agora ela vem da taxonomia. */
/* 48px de respiro entre a faixa azul e a primeira caixa. Medido depois da
   troca: a faixa terminava em y=812,3 e a caixa comecava em y=812,3 — zero.
   O espaco anterior vinha da estrutura do proprio componente de abas, que
   saiu junto; nenhuma das seis camadas acima da grade tem margem propria. */
.gyn-marcas { max-width: 1170px; margin: 48px auto 0; }
@media (max-width: 991px) { .gyn-marcas { margin-top: 32px; } }

/* DIAGCAR — a logo entregue e a versao BRANCA, desenhada para fundo escuro.
   Primeira tentativa: fundo escuro so nesta caixa. Ficou pior que o defeito —
   uma caixa preta no meio de nove claras.
   Comparadas as quatro combinacoes lado a lado, o que apagava a logo nao era
   o fundo claro e sim os 65% de opacidade da caixa inativa, que comem o
   contorno escuro que sustenta o desenho. A 100%, sobre a mesma caixa clara
   das outras, ela le. A excecao fica em uma linha e nao aparece no conjunto.
   Se um dia vier a versao positiva da marca, basta apagar esta regra. */
.gyn-marca-caixa[data-marca="diagcar"] img { opacity: 1; }
/* Item 1 do Feedback v1.0 (29/07): com TODAS as marcas a grade foi de 10 para
   19 caixas. Grid de 5 colunas deixava a última fileira de 4 desalinhada à
   esquerda; flex centra cada fileira. As caixas mantêm os mesmos 160×72. */
.gyn-marcas-abas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /* 848px = 5 caixas de 160 + 4 vãos de 12: preserva o ritmo de 5 por
       fileira do desenho original; sem o teto o flex encaixava 6 e a última
       fileira ficava com uma caixa órfã (medido: 6+6+6+1). */
    max-width: 848px;
    margin: 0 auto 30px;
    padding: 0;
    list-style: none;
}
.gyn-marca-caixa {
    box-sizing: border-box;      /* a borda da ativa e mais grossa: sem isto a caixa cresce */
    width: 160px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: #F5F6F8;
    border: 1px solid #E4E7EC;
    /* !important: o CSS de 2019 do tema (mfn-custom) traz
       "button { border-bottom: 0 solid #ccc !important }" e matava este
       sublinhado desde que a grade nasceu — achado na correção do Item 2.
       Este bloco imprime depois do mfn-custom, então o !important daqui vence. */
    border-bottom: 3px solid transparent !important;
    border-radius: 6px;          /* o mesmo raio do sistema de botoes, do Bloco A */
    cursor: pointer;
    transition: border-color .2s, background-color .2s, opacity .2s;
}
.gyn-marca-caixa img {
    max-width: 120px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: .65;                /* inativa, conforme o C.2 */
    transition: opacity .2s;
}
.gyn-marca-caixa:hover img,
.gyn-marca-caixa:focus-visible img { opacity: 1; }
/* Item 2 do Feedback v1.0 (29/07): a caixa selecionada ficava BRANCA
   (#FFFFFF) — e a logo da DiagCar é branca/prateada, então a seleção a
   apagava e a caixa parecia vazia/quebrada (confirmado por captura do
   operador). A seleção passa a ser dita só pela borda azul e pela opacidade
   cheia da logo; o fundo fica o mesmo #F5F6F8 das demais, onde todas as
   logos do catálogo são legíveis. Decisão registrada em 28/07: não haverá
   versão melhor da logo DiagCar — a correção tinha de ser por CSS. */
.gyn-marca-caixa[aria-selected=true] {
    background: #F5F6F8;
    border: 2px solid #2C4D90;
    border-bottom: 3px solid #2C4D90 !important;   /* vence o reset de 2019, como acima */
}
.gyn-marca-caixa[aria-selected=true] img { opacity: 1; }
.gyn-marca-caixa:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }
/* reserva obrigatoria: marca com produto e sem logo mostra o nome, mesmo
   tamanho e mesma posicao. Publicar produto nunca gera caixa vazia. */
.gyn-marca-nome {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2C4D90;
    text-align: center;
}
.gyn-marca-caixa[aria-selected=false] .gyn-marca-nome { opacity: .65; }
.gyn-marca-painel[hidden] { display: none; }

/* Item 1 — painel de marca ainda sem produto cadastrado (texto aprovado pelo
   operador em 29/07). O botão segue o sistema do Bloco A: 48px, raio 6,
   azul da marca — branco sobre #2C4D90 mede 8,17:1. */
.gyn-marca-vazio { text-align: center; padding: 26px 16px 34px; }
.gyn-marca-vazio p { margin: 0 0 18px; font-size: 16px; }
a.gyn-marca-orcamento {
    display: inline-block;
    height: 48px; line-height: 48px; padding: 0 28px;
    background: #2C4D90; color: #ffffff !important;
    font-weight: 700; text-decoration: none; border-radius: 6px;
}
a.gyn-marca-orcamento:hover { background: #1B3E87; }
a.gyn-marca-orcamento:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }

@media (max-width: 991px) {
    .gyn-marcas-abas { gap: 10px; }
    /* duas colunas, como antes — agora por flex-basis em vez de grid */
    .gyn-marca-caixa { width: calc(50% - 5px); }
}

/* E16: seção "compre na loja virtual" (o fundo parallax de 2019 foi perdido) */
.vc_row.gyn-loja-cta {
    background-color: #0f3560 !important;
    padding-top: 30px;
    padding-bottom: 30px;
}
.gyn-loja-cta h1, .gyn-loja-cta h2, .gyn-loja-cta h3, .gyn-loja-cta h4,
.gyn-loja-cta p, .gyn-loja-cta span, .gyn-loja-cta strong { color: #fff !important; }
.vc_row.gyn-loja-cta-mobile { background-color: #f1f1f1 !important; }
/* E19/E23: margens percentuais herdadas de 2019 (EMPRESA). Especificidade
   .vc_row.classe necessária: o CSS de Design Options do js_composer imprime
   depois deste com a mesma classe e !important. OBS: o padding-bottom de 15%
   da faixa azul da home NÃO é sobrescrito — é o encaixe de design das abas. */
.vc_row.vc_custom_1557430982490, .vc_row.vc_custom_1557430996650 {
    margin-top: 0 !important;
    /* 26/07: zerar a margem de 2019 deixou o vídeo colado na faixa azul do
       subheader (medido: 0px). Respiro fixo em vez do 5% percentual. */
    padding-top: 55px !important;
}
@media (max-width: 767px) {
    .vc_row.vc_custom_1557430982490, .vc_row.vc_custom_1557430996650 { padding-top: 32px !important; }
}
/* E14 v2: cards do grid — template 97 refeito (foto no topo em proporção fixa,
   texto em fluxo na zona C; grids em style=all, sem carrossel). Uniformidade:
   clamp de 2 linhas no título e 3 no resumo com min-height casada. */
.vc_grid-item { vertical-align: top; }
.vc_grid-item .vc_gitem-zone { background-size: contain !important; background-repeat: no-repeat; background-position: center; background-color: #fff; }
.vc_grid-item .vc_gitem-zone-c { padding: 14px 4px 2px; }
.vc_grid-item .vc_gitem-post-data-source-post_title h4 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em; line-height: 1.3; margin: 0 0 8px;
}
.vc_grid-item .vc_gitem-post-data-source-post_excerpt p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 4.2em; line-height: 1.4; margin: 0 0 12px;
    color: #626262; font-size: 13px;
}
/* o vc gera um <p> vazio antes do resumo (font_container) — sem isto ele ganha o min-height */
.vc_grid-item .vc_gitem-post-data-source-post_excerpt p:empty { display: none; }
/* img auxiliar do zone (o bg já mostra a foto); no vc 5.7 o src dela nem resolve */
.vc_grid-item .vc_gitem-zone-img { display: none; }
/* E23 v2: encaixe das abas — o Design Options de 2019 puxava a coluna das abas
   -253px para cima da faixa azul (vc_custom_1557498511484); com as rows do
   vídeo de fundo removidas isso invadia o título PRODUTOS. Abas em fluxo normal
   e a faixa azul com respiro fixo em vez do padding percentual de 15%. */
.vc_column-inner.vc_custom_1557498511484 { margin-top: 0 !important; }
.vc_row.vc_custom_1557338671351 { padding-bottom: 12px !important; }
/* I3: faixas da home de ponta a ponta (o "ex-full" era do Ultimate removido);
   padding lateral devolve o conteúdo à coluna central. overflow-x no body.home
   compensa os 50vw incluírem a barra de rolagem. */
body.home { overflow-x: hidden; }
.home .vc_row.gyn-faixa-escura, .home .vc_row.gyn-faixa-azul,
.home .vc_row.gyn-loja-cta, .home .vc_row.gyn-loja-cta-mobile,
.home .vc_row.gyn-secao-escura {
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}
/* I6: loja virtual — a coluna esquerda perdeu a arte (uploads 2019); centraliza o CTA */
.gyn-loja-cta .wpb_column { width: 100% !important; float: none; text-align: center; }
/* E12: h1 vazio do template do tema nas páginas de produto */
h1:empty { display: none; }
/* Validação CF7: o tema deixava texto vermelho sobre fundo vermelho (ilegível) */
.wpcf7-form .wpcf7-not-valid-tip {
    position: static !important;
    display: block;
    background: transparent !important;
    color: #dc3232 !important;
    font-size: 12px;
    line-height: 1.3;
    padding: 4px 0 0;
}
.wpcf7-form .wpcf7-not-valid { border-color: #dc3232 !important; }
/* ===== Botão flutuante de WhatsApp (escopo 24/07/2026) =====
   z-index alto porque o #Side_slide do Betheme usa 9998. */
.gyn-wa {
    position: fixed; right: 20px; bottom: 20px; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; box-shadow: 0 4px 14px rgba(0,0,0,.28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.gyn-wa:hover, .gyn-wa:focus { transform: scale(1.07); box-shadow: 0 6px 20px rgba(0,0,0,.34); }
.gyn-wa svg { width: 32px; height: 32px; fill: #fff; display: block; }
@media (max-width: 767px) {
    .gyn-wa { right: 14px; bottom: 14px; width: 52px; height: 52px; }
    .gyn-wa svg { width: 29px; height: 29px; }
}
/* Item 13 — balão de CTA ao lado do botão. Texto #1d2733 sobre #fff: 15,5:1.
   Alinhado à base do botão, à esquerda dele: não cobre conteúdo nem o botão.
   Sem transição sob prefers-reduced-motion. */
.gyn-wa-balao {
    position: fixed; right: 84px; bottom: 27px; z-index: 9999;
    display: flex; align-items: center; gap: 4px;
    background: #fff; border: 1px solid #d7dce4; border-radius: 12px 12px 2px 12px;
    box-shadow: 0 3px 12px rgba(16,24,40,.18);
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.gyn-wa-balao.gyn-wa-balao-on { opacity: 1; transform: none; pointer-events: auto; }
.gyn-wa-balao a {
    padding: 10px 2px 10px 14px;
    color: #1d2733 !important; font-size: 14px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.gyn-wa-balao button {
    width: 28px; height: 28px; margin-right: 4px; padding: 0;
    border: 0; background: transparent; cursor: pointer;
    color: #5b6472; font-size: 18px; line-height: 1;
}
.gyn-wa-balao button:hover { color: #1d2733; }
@media (max-width: 767px) {
    .gyn-wa-balao { right: 76px; bottom: 21px; }
    .gyn-wa-balao a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .gyn-wa-balao { transition: none; } }
@media print { .gyn-wa, .gyn-wa-balao { display: none; } }
/* ===== Eixo único de alinhamento (26/07) =====
   O tema aplica margin: 0 1% em .the_content_wrapper (12,19px em 1220), o que
   empurra TODO o conteúdo 12px para dentro — enquanto o título da faixa azul,
   a seção RELACIONADOS e o rodapé ficam no eixo do .section_wrapper. Resultado
   medido: container em x=66 e conteúdo em x=78 na home, empresa, contato e nas
   páginas de produto. Zerar essa margem põe todo mundo no mesmo eixo; o gutter
   do WPBakery (row -15px + coluna +15px) continua se anulando sozinho. */
/* O tema usa o par width:98% + margin:0 1% — os dois precisam mudar juntos:
   zerar só a margem alinha a esquerda e deixa a direita 25px curta.
   Só a partir de 960px: abaixo disso as margens externas do tema são estreitas
   demais para absorver a margem negativa de -15px das linhas do WPBakery, e a
   página ganhava 3px de rolagem horizontal (medido em 768px). Nessas larguras
   o layout já é de coluna única e o desvio de 1% é imperceptível. */
@media (min-width: 960px) {
    .the_content_wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* ===== 1º: título do produto duplicado (26/07) =====
   O nome do produto aparecia duas vezes: na faixa azul (impressa pelo tema) e
   num <h1> dentro do conteúdo, inserido pelo script que criou a vitrine em
   massa — 123 produtos. Medida provisória (opção C): esconde a linha do H1
   duplicado. A limpeza definitiva no conteúdo (opção A) vem na próxima rodada.
   :has() garante que só a linha que realmente contém o H1 seja escondida. */
.single-portfolio .the_content_wrapper > .vc_row:first-of-type:has(h1) { display: none; }

/* ===== 2º: cabeçalho em duas fileiras, alinhado (26/07) =====
   Medição que definiu a solução: SEM a busca, logo (247px) + menu (603px) já
   ocupam 1.004 dos 1.024px do .top_bar_left. Não cabe barra alguma na mesma
   fileira — nem estreita, nem na área direita, que roubaria espaço do menu.
   (A/B: com o item da busca o cabeçalho vai a 181px; sem ele, 91px.)

   Decisão: assumir as duas fileiras como desenho, cada uma alinhada por dentro.
     fileira 1 (y 0-90)   -> logo à esquerda, botão ORÇAMENTO à direita
     fileira 2 (y 90-180) -> menu à esquerda, barra de busca no fim da linha
   Nada de posicionamento absoluto: a primeira tentativa ancorou no <ul> do menu
   (e não no container), jogando a busca para y=135. Aqui tudo fica no fluxo.
   O elemento continua dentro do <ul> porque é assim que o tema o leva para o
   menu lateral do celular (scripts.js dá detach no nav#menu inteiro). */
@media (min-width: 960px) {
    /* --- fileira 1: só o logo, maior ---
       Com a fileira livre, o logo sai de 60px de altura para 76px (247 -> 313px
       de largura, mantendo a proporção 4,12 do arquivo oficial). Cabe nos 90px
       da fileira com 7px de folga em cima e embaixo. */
    #Top_bar:not(.is-sticky) .logo-main,
    #Top_bar:not(.is-sticky) .logo-sticky {
        height: 76px !important;
        width: auto !important;
        max-height: none !important;
        /* o tema fixa 15px de recuo no topo e a imagem cresce só para baixo
           (com 76px ela terminava 1px além da fileira). -8px recentraliza:
           (90-76)/2 = 7px de folga em cima e embaixo. */
        margin-top: -8px !important;
    }

    /* --- fileira 2: menu | busca | ORÇAMENTO, todos no mesmo eixo (y=135) ---
       O botão vive em .top_bar_right, irmão flex do .top_bar_left; align-self
       flex-end o leva para a fileira de baixo. */
    #Top_bar:not(.is-sticky) .top_bar_right {
        height: 90px !important;
        align-self: flex-end !important;
    }
    #Top_bar:not(.is-sticky) .top_bar_right_wrapper {
        height: 90px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* A busca fica ancorada no .top_bar_left (único ancestral relative, termina
       em x=1101) e desce para a fileira 2. O !important no position é
       obrigatório: o tema declara position:relative nos <li> do menu, para os
       submenus, e vencia a declaração. */
    #Top_bar:not(.is-sticky) .gyn-busca-item {
        position: absolute !important;
        top: 135px !important;
        right: 0 !important;
        transform: translateY(-50%);
        display: flex !important;
        align-items: center !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
        /* botão na mesma altura do campo de busca (40px). Ele vinha com 49px por
       causa dos 16px de recuo vertical do tema; como é flex com alinhamento
       central, zerar o recuo e fixar a altura mantém o texto no meio. */
    #Top_bar:not(.is-sticky) .gyn-busca input[type="search"] { width: 200px; height: 38px; }
    #Top_bar:not(.is-sticky) .gyn-busca button { height: 38px; }

    /* menu encostado à esquerda, no mesmo eixo do logo (a sangria de 20px é a
       que o tema já aplica ao logo). clear:left mantém as duas fileiras: sem
       ele o menu caberia ao lado do logo e o cabeçalho colapsaria numa linha. */
    #Top_bar:not(.is-sticky) .menu_wrapper {
        float: left !important;
        clear: left !important;
        margin-left: 20px !important;
    }
}

/* ===== Cabeçalho FIXO ao rolar (26/07) =====
   Ao rolar, o tema encolhe o #Top_bar para 61px e o torna fixo, esperando uma
   fileira só. As regras de duas fileiras acima não encolhem junto: medido com
   a página rolada, o menu ficava 59px, o botão 38px e a busca 94px FORA da
   faixa branca — desenhados por cima do banner, ilegíveis.
   Solução: no estado .is-sticky devolvemos o layout que o tema já sabe fazer
   (logo compacto + menu + botão em 61px) e a barra de busca sai de cena até a
   página voltar ao topo. Ela continua acessível no topo e no menu do celular. */
@media (min-width: 960px) {
    #Top_bar.is-sticky .gyn-busca-item { display: none !important; }
    #Top_bar.is-sticky .menu_wrapper {
        float: right !important;
        clear: none !important;
        margin-left: 0 !important;
    }
    /* 60px = a mesma altura que os itens do menu ocupam no estado fixo, então o
       botão passa a dividir o eixo com eles. Não dá para usar height:100% aqui:
       o pai não tem altura resolvida e o wrapper encolhia à altura do botão,
       prendendo-o no topo (medido: 0px de folga em cima, 26px embaixo). */
    #Top_bar.is-sticky .top_bar_right {
        height: 60px !important;
        align-self: auto !important;
    }
    #Top_bar.is-sticky .top_bar_right_wrapper {
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* o botão herda padding vertical de 16px, o que dá 49px de altura — 80% da
       barra de 61px, visualmente pesado demais. 9px deixa ~35px (57%), na mesma
       proporção que ele tem quando o cabeçalho está no topo. Fonte e cores
       ficam como estão. */
    #Top_bar.is-sticky .action_button {
        padding-top: 9px !important;
        padding-bottom: 9px !important;
    }
    #Top_bar.is-sticky .logo-main,
    #Top_bar.is-sticky .logo-sticky { margin-top: 0 !important; }
}

/* ===== Barra de pesquisa (escopo 24/07) =====
   O formulário do tema existia mas com largura 0; este fica sempre visível. */
.gyn-busca-item { display: flex; align-items: center; }
.gyn-busca {
    display: flex; align-items: center; height: 38px;
    background: #fff;
    /* borda no azul institucional, para o campo conversar com o botão
       ORÇAMENTO ao lado em vez de sumir num cinza claro */
    /* Raio 6px pelo Bloco A: a pílula de 22px ficava ao lado do ORÇAMENTO de
       6px, no mesmo eixo, e lia como divergência acidental. Os chips de marca
       da página de busca vazia ficam de fora do sistema — são atalhos de marca,
       a mesma família das abas, que o pacote manda não padronizar como botão. */
    border: 1px solid #2C4D90; border-radius: 6px; overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* ao focar, a borda escurece e ganha halo — precisa se distinguir do repouso,
   que agora já é azul */
.gyn-busca:focus-within { border-color: #1B3E87; box-shadow: 0 0 0 3px rgba(44,77,144,.20); }
.gyn-busca input[type="search"] {
    border: 0; outline: 0; background: transparent; height: 36px; width: 210px;
    padding: 0 6px 0 14px; font-size: 13px; color: #333; min-width: 0;
    /* o tema dá margin-bottom: 20px a todo input de formulário; dentro de um
       flex centralizado isso desloca o campo 10px para CIMA (medido: input em
       y=106 quando a caixa está em 115-155). Zerar devolve o texto ao centro. */
    margin: 0 !important;
    line-height: normal;
}
.gyn-busca input[type="search"]::placeholder { color: #8a8f98; }
.gyn-busca button {
    border: 0; background: transparent; cursor: pointer; height: 36px;
    padding: 0 12px 0 6px; display: flex; align-items: center;
}
.gyn-busca button svg { width: 17px; height: 17px; fill: #2C4D90; }
@media (max-width: 1300px) { .gyn-busca input[type="search"] { width: 140px; } }
/* dentro do menu lateral do mobile a barra ocupa a linha toda.
   Item 12 do Feedback v1.0 (29/07), medido a 390px: o painel #Side_slide tem
   250px e o bloco da busca media 290px — vazava 40px além da borda direita.
   Causa: o <li> dimensionava pelo conteúdo (input com largura fixa vinda do
   desktop) em vez de caber no painel. O li vira bloco de largura cheia com
   box-sizing, e o input abre mão da largura fixa dentro do painel. */
#Side_slide .gyn-busca-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px;
}
#Side_slide .gyn-busca { width: 100%; min-width: 0; box-sizing: border-box; }
#Side_slide .gyn-busca input[type="search"] { width: 100%; min-width: 0; flex: 1 1 auto; }
/* resultados: produto não é post — sem "publicado por / em" */
.search .post-meta, .search .post-footer, .search .post-relico { display: none !important; }
.search .post-item .post-desc { padding-top: 6px; }
/* CTA secundário da busca (13/08/2026): continua sendo <a>, pois navega para
   outra página. Sai da ponta direita, fica junto do resumo e ganha alvo de
   44px, contraste 8,17:1 e estado de foco visível. */
.search .search-footer { margin-top: 18px; text-align: left !important; }
.search .gyn-search-saiba-mais {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #2C4D90;
    border-radius: 6px;
    background: #fff;
    color: #2C4D90 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1;
    text-decoration: none !important;
    text-transform: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.search .gyn-search-saiba-mais:hover {
    border-color: #1B3E87;
    background: #2C4D90;
    color: #fff !important;
}
.search .gyn-search-saiba-mais:focus-visible {
    outline: 2px solid #2C4D90;
    outline-offset: 3px;
}
.search .gyn-search-saiba-seta { font-size: 18px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
    .search .gyn-search-saiba-mais { transition: none; }
}
/* página sem resultados */
#gyn-sem-resultado .gyn-sr-box { max-width: 720px; margin: 10px auto 40px; }
#gyn-sem-resultado h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.35; }
#gyn-sem-resultado h3 em { color: #2C4D90; font-style: normal; }
.gyn-sr-dicas { margin: 0 0 24px; padding-left: 20px; line-height: 1.8; color: #555; }
.gyn-busca-grande { height: 46px; max-width: 460px; }
.gyn-busca-grande input[type="search"] { height: 44px; width: 100%; font-size: 15px; }
.gyn-busca-grande button {
    height: 44px; padding: 0 20px; background: #2C4D90; color: #fff;
    font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.gyn-sr-tit { margin: 28px 0 10px; font-size: 12.5px; letter-spacing: .07em; color: #8a8f98; }
.gyn-sr-marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.gyn-sr-marcas a {
    display: inline-block; padding: 7px 14px; border: 1px solid #d7dce4; border-radius: 18px;
    font-size: 13px; color: #2C4D90; text-decoration: none;
}
.gyn-sr-marcas a:hover { background: #2C4D90; border-color: #2C4D90; color: #fff; }
.gyn-sr-cta { margin: 28px 0 0; }
.gyn-sr-cta a { font-weight: 700; color: #2C4D90; }

/* ==========================================================================
   FASE 1B — correções da auditoria externa de 27/07/2026.
   Este bloco é impresso depois de mfn-dynamic e mfn-custom desde a Fase 1A,
   então só usa !important onde briga com estilo inline vindo do conteúdo ou
   com o vc_tta_style, que o WPBakery injeta depois de nós.
   ========================================================================== */

/* C07 saiu em 28/07: ele anulava a regra de 2019 do vc_column-gap-35 na row de
   selos, e a faixa nova nao usa gap=35. O mesmo defeito na secao #orcamento
   continua tratado logo abaixo, pelo E.7. */
/* E.7 — a correção acima pegou só metade: a seção #orcamento TAMBÉM tem a classe
   vc_column-gap-35 e continuava recebendo a regra de 2019. Medido nas colunas
   (não na row, que é onde eu tinha olhado primeiro e visto 40px enganosos):
   margin -60px 0 -20px e padding-top 97,59px — os 8% de um container de 1.220px.
   É esse padding que empurra o título ORÇAMENTO para baixo e deixa a faixa
   azul-marinho vazia no topo. O respiro da seção vem da própria row, que já tem
   40px. */
#orcamento.vc_column-gap-35 > .vc_column_container {
    margin: 0 !important;
    padding-top: 0 !important;
}
/* F.5 — as duas colunas partem da mesma linha. */
#orcamento > .vc_column_container { align-self: start; }

/* C08 — botão VISITAR LOJA: #174770 sobre #0f3560 media 1,28:1. */
.gyn-loja-cta a.vc_btn3, .gyn-loja-cta-mobile a.vc_btn3 {
    background-color: #8FB4EA !important;
    border-color: #8FB4EA !important;
    color: #0f3560 !important;
    font-weight: 700;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gyn-loja-cta a.vc_btn3:hover, .gyn-loja-cta-mobile a.vc_btn3:hover,
.gyn-loja-cta a.vc_btn3:focus-visible, .gyn-loja-cta-mobile a.vc_btn3:focus-visible {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #0f3560 !important;
}

/* C12 — botão de pausa do carrossel. WCAG 2.2.2: movimento automático acima de
   5 segundos precisa de mecanismo de parada. */
.gyn-slider-wrap { position: relative; }
.gyn-slider-pausa {
    position: absolute; right: 14px; bottom: 14px; z-index: 5;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(15,53,96,.75); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.gyn-slider-pausa:hover { background: #0f3560; }
.gyn-slider-pausa:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.gyn-slider-pausa .gyn-ico { display: block; width: 14px; height: 14px; position: relative; }
.gyn-slider-pausa .gyn-ico::before, .gyn-slider-pausa .gyn-ico::after {
    content: ""; position: absolute; top: 0; width: 4px; height: 14px; background: #ffffff;
}
.gyn-slider-pausa .gyn-ico::before { left: 1px; }
.gyn-slider-pausa .gyn-ico::after { right: 1px; }
.gyn-slider-pausa[aria-pressed="true"] .gyn-ico::before {
    left: 2px; width: 0; height: 0; background: transparent;
    border-left: 12px solid #ffffff;
    border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.gyn-slider-pausa[aria-pressed="true"] .gyn-ico::after { display: none; }

/* C13 — indicadores do carrossel: alvo era 11x11 (WCAG 2.5.8 pede 24x24) e a
   pista estava invertida, com o ativo mais escuro que os inativos. */
.gyn-dots button {
    width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
    position: relative; cursor: pointer; border-radius: 50%;
}
.gyn-dots button::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    background: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(0,0,0,.35);
}
.gyn-dots button.on::before { background: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.gyn-dots button:focus-visible { outline: 3px solid #ffffff; outline-offset: 1px; }

/* C15 — skip link. Sem ele o teclado percorre logo, 4 itens de menu, 18 de
   submenu e a busca antes de alcançar o conteúdo, em toda página.
   Item 5 do Feedback v1.0 (29/07): o link aparecia sem ninguém pedir depois de
   recarregamentos em sequência — o navegador restaura o foco do carregamento
   anterior, e :focus o revelava. :focus-visible mantém a revelação por Tab
   (teclado, que é a função do link) e ignora o foco restaurado/por clique. */
.gyn-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100000;
    background: #2C4D90; color: #ffffff; padding: 12px 20px;
    font-weight: 700; text-decoration: none; border-radius: 0 0 4px 0;
}
.gyn-skip:focus-visible { left: 0; }

/* M01 + BLOCO A — alvo do cabeçalho. A busca tinha 38px e o botão 40px; o M01
   levou os dois a 44/42 e o Bloco A leva a 48, que é a altura única do sistema.
   Os dois sobem juntos: eles dividem o eixo da segunda fileira (cy=135), e mexer
   em um só reintroduz o desalinho que custou a rodada de 26/07. O campo fica 2px
   menor que a caixa porque a borda de 1px entra na conta nos dois lados. */
#Top_bar:not(.is-sticky) .gyn-busca { height: 48px !important; }
#Top_bar:not(.is-sticky) .gyn-busca input[type="search"] { height: 46px !important; }
#Top_bar:not(.is-sticky) .action_button {
    height: 48px !important; line-height: 48px !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
}

/* M02 — botão do menu no celular media 55x30; o alvo mínimo é 44px.
   Refino 30/07 (debug do operador): o rótulo MENU herdava padding 10px 5px do
   tema e, somado ao line-height de 44, o span media 55x64 DENTRO de um <a> de
   44x44 — o texto vazava do fundo azul e o conjunto invadia a faixa do banner
   (medido a 402px: span y=13..77 num cabeçalho de 71). O <a> vira pílula de
   largura automática e o span perde o padding do tema: o rótulo inteiro fica
   dentro do fundo, com os 44px exatos de altura. */
#Top_bar a.responsive-menu-toggle {
    width: auto !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
}
#Top_bar a.responsive-menu-toggle span {
    padding: 0 !important;
    margin-right: 0 !important;
    font-size: 14px !important;
    line-height: 44px !important;
}

/* Item 3 do Feedback v1.0 (29/07) — o botão do menu flutuava no meio do
   cabeçalho nas larguras de tablet. Medido a 768px: o tema o ancora com
   position:absolute em .top_bar_left (position:relative), que ali mede só
   505px dos 753px do cabeçalho — o botão parava em x=456, a 268px da borda.
   O único elemento absoluto dentro de .top_bar_left é o próprio botão
   (conferido no DOM), então soltar o relative é seguro: o botão passa a
   ancorar no .container do cabeçalho, como o visitante espera.
   O vertical fica em duas faixas: no celular os offsets do tema já centravam
   (medido: centro 35 vs 36 do cabeçalho) e continuam valendo — o novo bloco de
   ancoragem começa no MESMO y=0, então nada muda; no tablet o par do tema
   errava 4px e o top:50% centra de verdade (45 vs 46) porque ali o .container
   tem a altura do cabeçalho. top:50% no celular NÃO serve: o .container é mais
   baixo que o #Top_bar nessa faixa e o botão subia 6px (medido). */
@media (max-width: 991px) {
    #Top_bar .top_bar_left { position: static; }
    #Top_bar a.responsive-menu-toggle {
        right: 15px !important;
        margin-right: 0 !important;
    }
}
/* Refino 30/07 (debug do operador): no celular a logo parava a 45px da borda
   esquerda contra 15px do botão à direita — enquadramento assimétrico. Os 45
   são 15px do wrapper + margin de `#Top_bar .logo #logo { margin: 10px 30px
   !important }` no CSS de 2019 do mfn-custom (o MESMO arquivo do border-bottom
   que matava o sublinhado, item 2). A regra dele tem (0,2,1) — `#Top_bar #logo`
   sozinho perde por uma classe; o seletor abaixo iguala o peso e vence por vir
   depois. Zera-se SÓ a esquerda: o 10px vertical centra (10/11 num cabeçalho
   de 71) e o 30px à direita não atrapalha. Só no celular: no tablet o
   cabeçalho tem outra composição, com a fileira da busca. */
@media (max-width: 767px) {
    #Top_bar .logo #logo { margin-left: 0 !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    #Top_bar a.responsive-menu-toggle {
        top: 50% !important;
        margin-top: -22px !important;
    }
    /* Refino 30/07 (debug do operador, 2ª rodada): nesta faixa o tema mostra
       ORÇAMENTO *e* MENU. A pílula do MENU é absoluta (right:15) e o ORÇAMENTO
       ficava no fluxo POR BAIXO dela — 51px de sobreposição medidos a 820px
       (ORÇAMENTO x=591..725, MENU x=674..741). Os dois passam a ancorar no
       container, lado a lado: MENU em right:15 e ORÇAMENTO em right:94
       (15 + 67 da pílula + 12 de vão), cada um centrado na própria altura. */
    #Top_bar a.action_button {
        position: absolute !important;
        right: 94px !important;
        top: 50% !important;
        margin: -24px 0 0 !important;
    }
    /* E a logo alinha na MESMA sangria do conjunto da direita (16px do
       container, medido no pill). A base de 32px vinha de DUAS camadas:
       12px do .top_bar_left + 20px de margin do div.logo — margin no #logo
       SOMA em vez de substituir (aprendido na 1ª tentativa: 15px viraram 47).
       4px no div.logo + 12px da base = 16px, espelho exato do lado direito. */
    #Top_bar .top_bar_left .logo { margin-left: 4px !important; }
    #Top_bar .logo #logo { margin-left: 0 !important; }
}

/* ==========================================================================
   BLOCO A — sistema de botões
   Medido na home em 1366px (27/07): cinco alturas convivendo — 44 (ORÇAMENTO do
   cabeçalho), 48 (ENVIAR), 49 (ORÇAMENTO do corpo) e 51 (Saiba mais / VISITAR
   LOJA) — e três raios: 0, 5px e 25px. O raio de 25px vinha de
   `.vc_btn3.vc_btn3-shape-rounded{border-radius:25px !IMPORTANT}` no CSS
   personalizado da própria home; foi removido na origem, senão nada aqui pega.

   Três variantes, e só três:
     primária          #2C4D90 → #1B3E87, texto branco
     secundária        transparente, texto e borda #2C4D90   (.gyn-btn-sec)
     sobre fundo escuro #8FB4EA → branco, texto #0f3560

   Raio 6px e não pílula: o logotipo é de traço reto e num card de produto a
   pílula vira o elemento mais arredondado da tela, puxando atenção para o botão
   em vez do equipamento.
   ========================================================================== */

/* Geometria comum. O inline-flex é o que garante 48px cravados com o texto
   centrado — o .vc_btn3 é inline-block e vinha com 51px de padding próprio. */
a.vc_btn3.vc_btn3-size-md,
a.gyn-btn, a.gyn-btn-sec {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    height: 48px; min-height: 48px;
    padding: 0 24px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-transform: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wpcf7-form input[type="submit"],
#Top_bar:not(.is-sticky) .action_button {
    border-radius: 6px !important;
    font-size: 15px !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* O ORÇAMENTO do menu lateral do celular vive FORA do #Top_bar, em
   `#Side_slide .extras`, e por isso escapou da regra acima: medido 48,8px de
   altura com raio de 5px enquanto o resto do site já estava em 48/6. */
#Side_slide .action_button {
    height: 48px !important; line-height: 48px !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
}

/* Variante secundária. Declarada porque o pacote a define; hoje nenhum elemento
   do site a usa — o VISITAR LOJA, que a tabela do pacote listava aqui, fica na
   variante escura (ver abaixo). */
a.gyn-btn-sec {
    background: transparent !important;
    color: #2C4D90 !important;
    border: 2px solid #2C4D90 !important;
}
a.gyn-btn-sec:hover { background: #2C4D90 !important; color: #ffffff !important; }

/* Foco visível — não existia em botão nenhum do site. */
a.vc_btn3:focus-visible,
a.gyn-btn:focus-visible, a.gyn-btn-sec:focus-visible,
#Top_bar .action_button:focus-visible {
    outline: 2px solid #2C4D90 !important;
    outline-offset: 2px !important;
}
/* Sobre fundo escuro o contorno azul desapareceria. */
.gyn-secao-escura a.vc_btn3:focus-visible,
.gyn-faixa-escura a.vc_btn3:focus-visible,
.gyn-loja-cta a.vc_btn3:focus-visible,
.gyn-loja-cta-mobile a.vc_btn3:focus-visible {
    outline-color: #ffffff !important;
}

/* Sem exceção de altura no celular. Eu tinha escrito um @media levando o
   .vc_btn3 a 44px e medi o resultado em 390px: VISITAR LOJA ficou em 44 enquanto
   o ENVIAR e o ORÇAMENTO do menu lateral seguiam em 48 — duas alturas na mesma
   tela, que é exatamente o defeito que este bloco existe para eliminar. Os 44px
   do pacote são piso, não alvo, e 48 cabe em 390px sem rolagem horizontal. */

/* M03 — resolvido na origem em 27/07 (M32): o campo de CSS do tema passou de
   min-width:767px para 768px. O patch que existia aqui virou código morto e saiu. */

/* M11 — a borda #ccc sobre branco dá 1,6:1. #949494 atinge 3:1; o #d7dce4 sugerido
   na auditoria daria ~1,3:1, menos que o atual. O <br> final criava célula vazia. */
.widget_text div[style*="border: 1px solid"] { border-color: #949494 !important; }
#text-5 br:last-child { display: none; }

/* M16 — azuis fora da paleta que vivem em CSS. Os que estão em style="" no
   conteúdo são trocados pelo filtro gynprog_trocar_legado. */
body { --mfn-button-action-bg-hover: #1B3E87 !important; }
.btn-person-widget { color: #2C4D90 !important; }
.btn-person-widget:hover { background-color: #2C4D90 !important; color: #ffffff !important; }
/* C09 (Lote 2, 31/07) — os 7 botões da lateral viraram <a> (eram <button>
   dentro de <a>, HTML inválido). O CSS de 2019 usa seletor de CLASSE e migra
   sozinho (width 100%, padding 20px, transição); só o inline-flex vinha do
   reset de TAG do tema e é reposto aqui. Medido antes: 242x60 por botão. */
a.btn-person-widget {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;                 /* devolve os 60px de altura do <button> */
    text-decoration: none !important;
}
a.btn-person-widget:focus-visible { outline: 2px solid #2C4D90; outline-offset: -4px; }
/* M10 — a categoria da página atual ganha estado: fundo, peso e barra. */
a.btn-person-widget.gyn-cat-atual {
    background-color: #2C4D90 !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: inset 4px 0 0 #1B3E87;
}
/* M09 — linha "Mostrando X–Y de N" junto da paginação dos arquivos. */
.gyn-pager-info { margin: 0 0 6px; font-size: 14px; opacity: .85; text-align: center; }

/* M23 — a regra que existia aqui casava por `[style*="font-size:12.5px"]` e
   virou código morto no Bloco E: os dois parágrafos que tinham esse tamanho
   inline foram reescritos (o legal agora nasce em 14px e o "SIGA A GYNPROG"
   virou <h4>). Contraste conferido: branco a 0,7 sobre #252525 = 8,4:1. */

/* ==========================================================================
   BLOCO E — rodapé
   Medido em 1366px (27/07): três entrelinhas diferentes nas três colunas —
   28px (1,75), 30,4px (1,9) e 33,6px (2,1) — todas escritas em `style=""` no
   próprio conteúdo dos widgets. É por isso que a navegação parecia mais solta
   que o contato e o conjunto não lia como uma coisa só. Passa a 1,7 nas três.
   ========================================================================== */

#Footer .widget_text,
#Footer .widget_text p,
#Footer .widget_text li { line-height: 1.7 !important; }

/* E.2 — título de coluna é RÓTULO, não título de conteúdo. Medido: <h4> de 20px
   em caixa normal, que competia com o texto que deveria apenas organizar. O
   reflexo seria promover o "SIGA A GYNPROG" a 20px; aqui se faz o inverso. */
#Footer .widgettitle,
#Footer .widget_text h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.4 !important;
    color: #ffffff !important;
    opacity: 1;
    margin: 0 0 20px !important;
}

/* E.4 — a navegação era um <p> com <br>, o que forçava a entrelinha de 2,1 a
   fazer o papel de espaçamento. Com <ul> o espaço vira `gap` de verdade, e cada
   item passa de 23px para ~31px de altura — acima do mínimo de 24px da WCAG
   2.5.8, que os links do rodapé só não violavam por serem texto corrido. */
#Footer .gyn-rodape-nav {
    list-style: none; margin: 0 0 24px; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
#Footer .gyn-rodape-nav li { margin: 0; }
#Footer .gyn-rodape-nav a { display: inline-block; padding: 2px 0; }

/* Formulário na seção escura da /empresa/ (debug do operador, 31/07): o <p>
   do botão nasce com margin-top 0 e o botão COLAVA na caixa do Nome (vão de
   0px medido a 1366; no produto o mesmo formulário tem 18px). Margem no
   próprio botão — sem :has — iguala ao produto sem tocar as outras páginas. */
.gyn-secao-escura .wpcf7 .wpcf7-submit { margin-top: 18px; }

/* E.4b (fila de 28/07, feito em 30/07) — os TRES links de contato da coluna
   (endereço no Maps, tel: e mailto:) mediam 23px de altura a 390px, abaixo
   do mínimo de 24px da WCAG 2.5.8. O mesmo padding dos links da navegação
   os leva a ~27px. Escopo pelos esquemas de URL para não tocar os ícones
   sociais (que já têm alvo de 44px). */
#Footer a[href^="tel:"],
#Footer a[href^="mailto:"],
#Footer a[href^="https://www.google.com/maps"] {
    display: inline-block;
    padding: 2px 0;
}

/* E.5 — redes sociais. Eram três links de texto separados por "·", que o leitor
   de tela anuncia como conteúdo, em alvos de 23px colados. Viram glifos de 24px
   dentro de alvos de 44px. Monocromáticos de propósito: o degradê do Instagram,
   o azul do Facebook e o vermelho do YouTube seriam o elemento mais chamativo
   de um rodapé #252525 — mais que os canais de contato — e são cores de
   terceiros no único lugar onde a marca deveria fechar sozinha.
   O -10px alinha o glifo do primeiro ícone com a borda da coluna: o alvo tem
   44px e o desenho 24px, então sobram 10px de cada lado. */
#Footer .gyn-sociais { display: flex; gap: 4px; margin: 6px 0 0 -10px; }
#Footer .gyn-sociais a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    color: rgba(255,255,255,.8);
    transition: color .2s ease;
}
#Footer .gyn-sociais a:hover,
#Footer .gyn-sociais a:focus-visible { color: #ffffff; }
#Footer .gyn-sociais a:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
#Footer .gyn-sociais svg { display: block; }

/* E.4 — 60px de vazio entre o fim das colunas e a barra de copyright. */
#Footer .widgets_wrapper { padding: 10px 0 40px !important; }

/* E.4 — a coluna 1 carrega logo, descrição e dados legais; as outras duas são
   listas curtas. Três colunas iguais deixavam a primeira apertada e as outras
   sobrando. O tema monta isso com float, então as margens precisam ir a zero
   junto com a troca para grade. */
@media (min-width: 992px) {
    #Footer .widgets_wrapper > .container {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 0 40px;
    }
    #Footer .widgets_wrapper > .container > .column {
        width: auto !important; margin: 0 !important; float: none !important;
    }
}

/* E.6 — sinal de link externo no VISITAR LOJA. O rótulo fica: "Acessar" não
   diria o quê. */
.gyn-loja-cta a.vc_btn3::after,
.gyn-loja-cta-mobile a.vc_btn3::after {
    content: ""; display: inline-block; width: 14px; height: 14px;
    margin-left: 8px; flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--gyn-ico-externo) center/contain no-repeat;
    mask: var(--gyn-ico-externo) center/contain no-repeat;
}
/* ATENÇÃO: todo este CSS vive dentro de uma string PHP de ASPAS SIMPLES — veja a
   atribuição no topo do arquivo. Uma aspa simples aqui dentro fecha a string e
   derruba o site com erro de parse; foi o que aconteceu na 1ª tentativa deste
   bloco, com o atributo xmlns do data URI. Por isso as aspas internas do SVG vão
   codificadas como %22. Regra para as próximas rodadas: nenhuma aspa simples
   dentro do CSS, nem no código, nem em comentário como este. */
:root {
    --gyn-ico-externo: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M14 3h7v7h-2V6.4l-8.3 8.3-1.4-1.4L17.6 5H14V3z%22/%3E%3Cpath d=%22M5 5h5v2H7v10h10v-3h2v5H5V5z%22/%3E%3C/svg%3E");
}

/* M04 — corpo em 14px e todo link em 15px peso 700. Aplicado por último de
   propósito: é o item que mais desloca medida no site inteiro. */
body { font-size: 16px; }
#Content a:not(.button):not([class*="vc_btn"]):not(.wpb_button),
#Footer a { font-size: inherit; font-weight: inherit; }
.the_content_wrapper p a:not(.button):not([class*="vc_btn"]):not(.wpb_button) { text-decoration: underline; }

/* ==========================================================================
   LOTE 0 — regressões da Fase 1, corrigidas em 27/07/2026.
   NOTA DE CASCATA (corrige o que estava escrito no topo do bloco da Fase 1B):
   este bloco é impresso em wp_head:999 e ganha de mfn-dynamic e mfn-custom, mas
   PERDE para o vc_custom-css da página, para o vc_tta_style e para os 11 blocos
   vc_shortcodes-custom-css impressos no corpo — 16 blocos ao todo. Contra esses,
   ou !important com especificidade maior, ou correção no conteúdo.
   ========================================================================== */

/* R8 — âncora focável do skip link. Sem tabindex o navegador rola mas não move
   o foco, e o Tab seguinte volta ao menu. */
#gyn-conteudo { position: relative; }
#gyn-conteudo:focus { outline: none; }

/* R5 — o alvo de 44px valia só no topo da página. No cabeçalho fixo o botão
   ficava com padding de 9px, cerca de 35px — e é nele que o visitante passa a
   maior parte da rolagem. A barra fixa tem 61px, então 44px cabem centrados. */
#Top_bar.is-sticky .action_button {
    height: 44px !important;
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   LOTE 1 — formulários. C03 (rótulos), F01 (foco, obrigatório, erro) e C18.
   Rótulo é IMPLÍCITO (campo dentro do <label>): a página CONTATO renderiza o
   formulário 1688 duas vezes no mesmo documento, então id fixo em <label for>
   ficaria duplicado e apontaria para o campo errado.
   ========================================================================== */

.gyn-campo { display: flex; flex-direction: column; margin-bottom: 14px; }

/* gyn-alinha-campo — 29/07/2026.
   O campo passa a ser uma COLUNA: rotulo, linha de apoio e controle, com o
   controle sempre grudado no rodape dela. Num formulario de varias colunas —
   o 1687, das 86 paginas de produto — as colunas tem a mesma altura, entao os
   controles se alinham sozinhos mesmo que um campo nao tenha linha de apoio ou
   tenha rotulo que quebre em duas linhas.

   Medido antes: o select de marca comecava 24px acima dos tres <input>, porque
   so ele nao tinha .gyn-ajuda — 18,19px de texto + 2px + 6px de margens. O
   texto de apoio entrou no conteudo dos formularios 1686 e 1687, mas a regra
   abaixo nao depende dele: e a rede que impede o defeito de voltar. */
.gyn-campo .wpcf7-form-control-wrap { margin-top: auto; }
.gynprog-form-col { display: flex; flex-direction: column; }
/* O Contact Form 7 embrulha cada campo num <p> (wpautop), e e ELE o filho
   direto da coluna — nao o label. Sem esta linha o label nao e item flexivel de
   nada, nao cresce, e o margin-top:auto acima fica sem folga para consumir.
   Medido a 1100px, onde as colunas caem para ~238px e o apoio de dois campos
   quebra em duas linhas: desvio de 19px entre os controles. Com o <p> na
   corrente, zero — e a altura da linha continua 132px, sem deslocamento.
   A margem de 15px embaixo do <p> fica: e ela que separa a linha do botao. */
.gynprog-form-col > p { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Largura das colunas. Medido a 768px com o flex-wrap original: a linha
   quebrava em 3+1 e o select, sozinho na segunda fileira, esticava para 694px
   ao lado de tres campos de 223px. Com grade explicita a proporcao se mantem
   em qualquer largura: 4 colunas, 2x2 no tablet, 1 no celular.

   O prefixo .wpcf7-form e obrigatorio — a regra original vive num <style>
   dentro do conteudo do formulario, que sai no CORPO da pagina, depois deste
   bloco. Em empate de especificidade ganha quem vem depois, entao e preciso
   uma classe a mais. Aquele <style> continua la de proposito: se este CSS
   sumir, o formulario nao fica sem layout.

   Conferido por injecao antes de subir: a 1900px a saida e IDENTICA a de hoje
   — 4 colunas de 296px, desvio 0. O desktop nao muda. */
.wpcf7-form .gynprog-form-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 991px) {
    .wpcf7-form .gynprog-form-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .wpcf7-form .gynprog-form-row { grid-template-columns: 1fr; }
}
.gynprog-form-col .gyn-campo { flex: 1 1 auto; margin-bottom: 0; }

/* O <select> nao declara altura e sua caixa de conteudo fecha 2px mais baixa
   que a do <input> com a mesma fonte de 15px — 43px contra 45px, medido. Com a
   altura declarada nos dois, eles nao voltam a divergir. O textarea fica de
   fora de proposito: ele cresce. */
.wpcf7-form .gyn-campo input[type="text"],
.wpcf7-form .gyn-campo input[type="tel"],
.wpcf7-form .gyn-campo input[type="email"],
.wpcf7-form .gyn-campo select {
    height: 45px;
}
.gyn-rotulo {
    display: block; margin-bottom: 6px;
    font-size: 14px; font-weight: 600; line-height: 1.3;
}
.gyn-obrig { color: #b3261e; font-weight: 700; }   /* 6,54:1 sobre branco */

/* Fundo escuro. A lista inclui .vc_custom_1557431775075 — a caixa do formulário
   da página CONTATO, que no Bloco F passou de #005495 para #0f3560 mas continua
   sem classe própria, porque a cor vem de um Design Options de 2019.
   Medido em 27/07: sem esta linha o rótulo saía preto sobre azul, em 2,70:1.

   A legenda entra na MESMA lista, e não numa regra própria: eu a criei separada,
   sem declarar cor, e ela saiu PRETA sobre a caixa azul (1,6:1) — a repetição
   exata do erro dos rótulos. Texto novo dentro de caixa escura tem um lugar só
   para ser declarado, que é aqui. */
.gyn-secao-escura .gyn-rotulo, .gyn-loja-cta .gyn-rotulo,
#orcamento .gyn-rotulo, .gyn-faixa-escura .gyn-rotulo,
.vc_custom_1557431775075 .gyn-rotulo,
.gyn-secao-escura .gyn-legenda, .gyn-loja-cta .gyn-legenda,
#orcamento .gyn-legenda, .gyn-faixa-escura .gyn-legenda,
.vc_custom_1557431775075 .gyn-legenda { color: #fff; }

/* B3 e B6 — a MESMA lista, e nao uma regra nova.
   .gyn-ajuda e .gyn-horario nasceram com tamanho e opacidade e sem cor, e
   herdaram preto: medidas em 1,60:1 e 1,63:1 sobre o #0f3560 da secao de
   orcamento — ilegiveis. Neste CSS, texto sobre fundo escuro so fica branco
   se a classe entrar aqui. Com a opacidade de .8 e .85 que elas ja tem, o
   branco devolve cerca de 9:1. */
.gyn-secao-escura .gyn-ajuda, .gyn-loja-cta .gyn-ajuda,
#orcamento .gyn-ajuda, .gyn-faixa-escura .gyn-ajuda,
.vc_custom_1557431775075 .gyn-ajuda,
.gyn-secao-escura .gyn-horario, .gyn-loja-cta .gyn-horario,
#orcamento .gyn-horario, .gyn-faixa-escura .gyn-horario,
.vc_custom_1557431775075 .gyn-horario { color: #fff; }   /* 12,36:1 na caixa da CONTATO */

/* Asterisco: #b3261e é vermelho escuro e some no azul (1,89:1). #ff8a80 mede
   5,42:1 na faixa escura e 3,40:1 na caixa da CONTATO, mantendo saturação de 50%
   — continua lendo como vermelho, não vira rosa pastel. O estado obrigatório em
   si é anunciado por aria-required; o asterisco é reforço visual. */
.gyn-faixa-escura .gyn-obrig { color: #ff8a80; }

/* F.3 — sobre fundo AZUL o asterisco deixa de ser vermelho. Vermelho sobre azul
   é o pior par cromático que existe: luminâncias próximas e bordas que vibram.
   Na caixa da CONTATO o #ff8a80 media 3,40:1 e reprovava 4,5:1; com a caixa em
   #0f3560 (F.2) o #8FB4EA mede 5,82:1. A faixa #252525 acima fica com o vermelho
   porque ali o fundo é neutro e o par não tem esse problema. */
.gyn-secao-escura .gyn-obrig, .gyn-loja-cta .gyn-obrig,
#orcamento .gyn-obrig,
.vc_custom_1557431775075 .gyn-obrig { color: #8FB4EA; }

/* F.3 — o asterisco sozinho é convenção aprendida, não informação. */
.gyn-legenda { font-size: 14px; margin: 0 0 18px; opacity: .9; }

/* F.2 — 56px de branco entre o fim do subheader e o topo da caixa do formulário.
   Medido antes: 0px, dois azuis diferentes encostados — perto demais para parecer
   contraste intencional, longe demais para parecer a mesma cor. */
.gyn-contato-topo { margin-top: 56px !important; }

/* F.7 — os canais de contato eram cinco <p> posicionados por margin-top negativa
   de -26px sob <img> de ícones que estão em 404 desde 2019, e nenhum era link.
   Viram lista, com os mesmos tel:/wa.me/mailto: que o rodapé já usa. */
.gyn-canais { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gyn-canais li { margin: 0; line-height: 1.6; }
.gyn-canais a { text-decoration: underline; }
.gyn-canais a:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }

/* O iframe do mapa era display:inline, o que ainda somava o vão da linha de base
   embaixo, e trazia width=2560 num container de 1.351px. */
.gyn-mapa iframe { display: block; width: 100%; height: 400px; border: 0; }

/* F01 — foco visível em todos os controles do formulário. */
.wpcf7-form input:focus-visible,
.wpcf7-form select:focus-visible,
.wpcf7-form textarea:focus-visible,
.wpcf7-form button:focus-visible,
.wpcf7-form input[type="submit"]:focus-visible {
    outline: 2px solid #2C4D90 !important;
    outline-offset: 2px !important;
}
.gyn-secao-escura .wpcf7-form input:focus-visible,
.gyn-secao-escura .wpcf7-form select:focus-visible,
.gyn-secao-escura .wpcf7-form textarea:focus-visible {
    outline-color: #8FB4EA !important;
}

/* F01 — erro por campo e resposta do formulário. */
.wpcf7-not-valid { border: 1px solid #b3261e !important; }
.wpcf7-not-valid-tip {
    display: block; margin-top: 5px;
    font-size: 13px; font-weight: 600; color: #b3261e;
}
.gyn-secao-escura .wpcf7-not-valid-tip { color: #ffd7d3; }
.wpcf7-response-output {
    margin: 14px 0 0 !important; padding: 12px 14px !important;
    border-width: 2px !important; font-size: 14px; line-height: 1.4;
}
/* A MESMA lista dos rótulos/legendas/apoios — TERCEIRA vez desta armadilha
   (31/07, achado do operador): a resposta do formulário ("Recebemos sua
   solicitação...") nasceu acima só com margem/borda/fonte, sem cor, e saiu
   PRETA sobre o azul da /empresa/. Texto em caixa escura só fica branco se
   a classe entrar AQUI. */
.gyn-secao-escura .wpcf7-response-output, .gyn-loja-cta .wpcf7-response-output,
#orcamento .wpcf7-response-output, .gyn-faixa-escura .wpcf7-response-output,
.vc_custom_1557431775075 .wpcf7-response-output { color: #fff; }

/* C18 — linha de tratamento de dados sob o botão de envio. */
.gyn-lgpd { margin: 12px 0 0; font-size: 13px; line-height: 1.5; opacity: .9; }
.gyn-lgpd a { text-decoration: underline; }
.gyn-secao-escura .gyn-lgpd, .gyn-secao-escura .gyn-lgpd a,
#orcamento .gyn-lgpd, #orcamento .gyn-lgpd a,
.gyn-faixa-escura .gyn-lgpd, .gyn-faixa-escura .gyn-lgpd a,
.vc_custom_1557431775075 .gyn-lgpd, .vc_custom_1557431775075 .gyn-lgpd a { color: #fff; }

/* Botão de envio. Medido: #252525 sobre #0f3560 dava 1,24:1 — o CTA principal do
   formulário não se distinguia do fundo (WCAG 1.4.11 pede 3:1 para componente).
   Duas variantes, porque nenhuma cor única passa em fundo claro e escuro. */
.wpcf7-form input[type="submit"] {
    background-color: #2C4D90 !important;   /* 8,17:1 sobre branco */
    color: #ffffff !important;              /* 8,17:1 de texto */
    border: 0 !important;
    min-height: 48px;
    padding: 0 28px !important;
    font-weight: 700;
}
.wpcf7-form input[type="submit"]:hover { background-color: #1B3E87 !important; }

.gyn-secao-escura .wpcf7-form input[type="submit"],
#orcamento .wpcf7-form input[type="submit"],
.gyn-faixa-escura .wpcf7-form input[type="submit"],
.vc_custom_1557431775075 .wpcf7-form input[type="submit"] {
    background-color: #8FB4EA !important;   /* 5,82:1 na faixa escura · 3,66:1 na caixa da CONTATO */
    color: #0f3560 !important;              /* 5,82:1 de texto sobre o botão */
}
.gyn-secao-escura .wpcf7-form input[type="submit"]:hover,
#orcamento .wpcf7-form input[type="submit"]:hover,
.gyn-faixa-escura .wpcf7-form input[type="submit"]:hover,
.vc_custom_1557431775075 .wpcf7-form input[type="submit"]:hover {
    background-color: #ffffff !important;
}

/* ==========================================================================
   Escala de texto da página de política de privacidade.
   Medido em 27/07: sem estilo próprio a página herdava h2 de 40px/45px — a
   escala de TÍTULO DE PÁGINA do tema — em 10 seções de texto corrido, com
   linhas de ~84 caracteres em 1.220px de largura. Aqui a página passa a ter
   hierarquia de documento: título de seção em 22px e medida limitada em 72ch,
   dentro da faixa de 60 a 75 caracteres.
   ========================================================================== */

body.gyn-pagina-legal .the_content_wrapper {
    max-width: 72ch;
    padding-top: 48px;   /* medido: sem isto o primeiro título encostava na faixa azul */
}
@media (max-width: 991px) {
    body.gyn-pagina-legal .the_content_wrapper { padding-top: 32px; }
}

body.gyn-pagina-legal .the_content_wrapper h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    margin: 44px 0 12px;   /* separa as 10 seções com mais força que o espaço entre parágrafos */
    color: #2C4D90;
    text-wrap: pretty;
}
body.gyn-pagina-legal .the_content_wrapper h2:first-child { margin-top: 0; }

body.gyn-pagina-legal .the_content_wrapper p {
    line-height: 1.65;
    margin-bottom: 20px;   /* 0,76 da entrelinha; com 14px a razão era 0,53 e os parágrafos colavam */
    text-wrap: pretty;
}
body.gyn-pagina-legal .the_content_wrapper a { text-decoration: underline; }

/* ==========================================================================
   Galeria do produto em carrossel (29/07/2026).

   Medido antes, no produto 2711 a 1366px: a mesma URL entregava dois layouts
   diferentes conforme o isotope ganhasse ou perdesse a corrida com o
   carregamento das fotos — cinco imagens empilhadas UMA SOBRE A OUTRA num
   container de 5px (uma visivel de cinco), ou uma tira de 1.505px ao lado de
   uma coluna de texto de 1.250px. Aqui nao ha isotope: o trilho e um container
   de rolagem com scroll-snap, que funciona antes de qualquer JS.

   Palco quadrado porque as 369 fotos de galeria do catalogo sao 1:1 sem uma
   excecao; object-fit: contain protege a foto que entrar fora do padrao.

   Contrastes medidos (relacao WCAG): contador branco sobre #1B3E87 = 10,07:1;
   seta e borda ativa #2C4D90 sobre branco = 8,17:1. Fundo das setas e solido,
   nao translucido, para a medida nao depender da foto que estiver atras.
   ========================================================================== */

.gyn-galeria { margin: 0 0 24px; }
.gyn-galeria-palco { position: relative; }

.gyn-galeria-trilho {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 4px;
}
.gyn-galeria-trilho::-webkit-scrollbar { display: none; }
.gyn-galeria-trilho:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }

.gyn-galeria-slide { flex: 0 0 100%; scroll-snap-align: center; }
/* Refino 30/07 (debug do operador): as setas absolutas cobriam ~51px da foto
   de cada lado (medido a 402px: foto x=37..364, setas em x=44 e x=314). Fotos
   de produto têm conteúdo até a borda (fileiras de conectores), então a seta
   caía sobre conteúdo. Canaleta de 56px por lado DENTRO do slide — 8px de
   borda + 44px de seta + 4px de folga: a foto encolhe proporcionalmente e as
   setas ficam sobre o branco do trilho, nunca sobre a foto. O snap não muda
   (o slide segue com 100% da base); o palco encolhe junto porque a altura
   vem da própria foto quadrada. */
.gyn-galeria-slide { padding: 0 56px; box-sizing: border-box; }
.gyn-galeria-slide > a { display: block; }
.gyn-galeria-slide > a:focus-visible { outline: 2px solid #2C4D90; outline-offset: -2px; }

.gyn-galeria-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
}

/* Setas: 44x44 e a area minima de alvo da WCAG 2.5.8, nao so o desenho. */
.gyn-galeria-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: #2C4D90;
    border: 1px solid #d7dce4;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .16);
    cursor: pointer;
}
.gyn-galeria-ant  { left: 8px; }
.gyn-galeria-prox { right: 8px; }
.gyn-galeria-seta:hover { background: #2C4D90; color: #fff; border-color: #2C4D90; }
.gyn-galeria-seta:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }
.gyn-galeria-seta svg { width: 20px; height: 20px; fill: currentColor; }

.gyn-galeria-num {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 0;
    padding: 3px 10px;
    background: #1B3E87;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 11px;
}

/* Miniaturas: 96x96 (31/07; nasceram 64x64) — alvo minimo de 44px folgado.
   Refino 30/07 (debug do operador): a foto de dentro renderizava na proporcao
   natural — o height:100% perdia para um `height:auto !important` do tema
   (medido: img de 60x62 num conteudo de 60x60, fundo decepado pelo overflow,
   canto do contorno azul comido pela foto). Como o tema tambem tem regras por
   user-agent (no Firefox do celular as caixas saiam de 64), TUDO que define a
   geometria da miniatura leva !important: caixa 64x64 cravada no flex, foto
   contida, e 2px de respiro para a foto nao encostar no contorno. */
.gyn-galeria-miniaturas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
/* 96×96 escolhido pelo operador em 31/07, na tira comparativa 64/80/96/112:
   as fotos de kit têm dezesseis objetos num quadro 1:1 e viravam mancha aos
   64px — a investigação provou que NADA deformava (beacon: 0 deformadas,
   arquivo íntegro); era densidade, não geometria. A fonte de 150px do
   WordPress cobre os 88px internos com nitidez. */
.gyn-galeria-mini {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    flex: 0 0 96px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px !important;
    overflow: hidden;
    background: #fff;
    border: 2px solid #e3e7ee;
    border-radius: 4px;
    cursor: pointer;
}
/* A foto leva TAMANHO FIXO, não percentual: o tema faz o botão virar flex e
   altura percentual de item flex não resolve (medido: height:100% !important
   inline seguia rendendo 58px numa foto NATURALMENTE quadrada de 820x820 —
   2px de distorção e o fundo decepado). 88 = 96 − 4 de borda − 4 de respiro;
   o par com #Content vence o `#Content img { height:auto }` do tema. */
.gyn-galeria-mini img,
#Content .gyn-galeria-mini img {
    display: block;
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    object-fit: contain !important;
}
.gyn-galeria-mini:hover { border-color: #97a4bd; }
.gyn-galeria-mini[aria-current="true"] { border-color: #2C4D90; }
.gyn-galeria-mini:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }
/* QUARTA mordida do reset de 2019 (achado do operador em 31/07, pelo painel
   de Animações do Firefox: as transições listavam border-top/right/left e
   NUNCA border-bottom): `button { border-bottom: 0 solid #ccc !important }`
   do mfn-custom decapa a base de todo <button>. As caixas de marcas foram
   vacinadas em 29/07 (linha "vence o reset de 2019"); as miniaturas e as
   setas nasceram depois SEM a vacina — o "quadrado azul sem fechar embaixo".
   Todo botão novo do projeto precisa repor o border-bottom com !important. */
.gyn-galeria-mini { border-bottom: 2px solid #e3e7ee !important; }
.gyn-galeria-mini:hover { border-bottom-color: #97a4bd !important; }
.gyn-galeria-mini[aria-current="true"] { border-bottom-color: #2C4D90 !important; }
.gyn-galeria-seta { border-bottom: 1px solid #d7dce4 !important; }
.gyn-galeria-seta:hover { border-bottom-color: #2C4D90 !important; }
.gyn-rel-seta { border-bottom: 1px solid #d7dce4 !important; }
.gyn-rel-seta:hover { border-bottom-color: #2C4D90 !important; }

/* ==========================================================================
   Item 14 do Feedback v1.0 (29/07) — PRODUTOS RELACIONADOS em carrossel.
   Antes: grade col-3 do tema no desktop (2 fileiras de 3) e pilha vertical
   no celular. Mesmo padrão dos outros carrosséis da casa: scroll-snap por
   CSS (funciona sem JS, arrasta no toque) + setas injetadas por JS, porque a
   marcação vem do template do tema e não passa por filtro de conteúdo.
   Sem rotação automática. Setas de 44px como as da galeria.
   ========================================================================== */
.single-portfolio .gyn-rel-palco { position: relative; min-width: 0; max-width: 100%; }
/* O .section_wrapper do tema é FLEX no celular e este bloco, como item de
   flex, tem min-width:auto — com um trilho de cartões que não encolhem
   (flex-shrink 0), o min-content somava os 6 cartões e o bloco estourava
   para 577px num viewport de 390 (medido). min-width:0 quebra a corrente. */
.single-portfolio .section-related-adjustment { min-width: 0; max-width: 100%; }
.single-portfolio .section-related-ul {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 20px;
}
.single-portfolio .section-related-ul::-webkit-scrollbar { display: none; }
.single-portfolio .section-related-ul:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }
.single-portfolio .section-related-ul .column.post-related {
    float: none;
    flex: 0 0 calc((100% - 40px) / 3);
    width: auto;
    margin: 0;
    /* sem isto o cartão não encolhe abaixo do min-content da imagem e saía
       com 416px num viewport de 390 (medido) — o velho piso de flex */
    min-width: 0;
    scroll-snap-align: start;
}
@media (max-width: 991px) {
    .single-portfolio .section-related-ul .column.post-related { flex-basis: 72%; }
}
/* Item 15 — bloco de compartilhamento reescrito. Ícones monocromáticos no
   azul da marca (mesma decisão do rodapé), alvos de 44px, rótulo preservado. */
.share-simple-wrapper.gyn-share-pronto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.gyn-share-rotulo { font-weight: 700; margin-right: 6px; }
.share-simple-wrapper.gyn-share-pronto a,
.share-simple-wrapper.gyn-share-pronto button {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: #fff; color: #2C4D90 !important;
    border: 1px solid #d7dce4; border-radius: 50%;
    cursor: pointer; text-decoration: none;
}
.share-simple-wrapper.gyn-share-pronto a:hover,
.share-simple-wrapper.gyn-share-pronto button:hover {
    background: #2C4D90; color: #fff !important; border-color: #2C4D90;
}
.share-simple-wrapper.gyn-share-pronto a:focus-visible,
.share-simple-wrapper.gyn-share-pronto button:focus-visible {
    outline: 2px solid #2C4D90; outline-offset: 2px;
}
.share-simple-wrapper.gyn-share-pronto svg { width: 22px; height: 22px; fill: currentColor; }
.gyn-share-aviso { font-size: 13px; font-weight: 600; color: #1B3E87; }

.gyn-rel-seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #fff;
    color: #2C4D90;
    border: 1px solid #d7dce4;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .16);
    cursor: pointer;
    z-index: 2;
}
.gyn-rel-seta:hover { background: #2C4D90; color: #fff; border-color: #2C4D90; }
.gyn-rel-seta:focus-visible { outline: 2px solid #2C4D90; outline-offset: 2px; }
.gyn-rel-seta svg { width: 20px; height: 20px; fill: currentColor; }
.gyn-rel-ant  { left: -10px; }
.gyn-rel-prox { right: -10px; }

/* Anuncio de posicao para leitor de tela; o contador visivel e decorativo. */
.gyn-galeria-vivo {
    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;
}

/* ==========================================================================
   gyn-menu-azul — menu principal, submenu de marcas e empilhamento da pagina
   de produto. 29/07/2026.

   Medido no ar, ANTES:
     item de topo  #333535 sobre #fff ......... 12,35:1  (desktop)
     item de topo  #2A2A2A sobre #F9F9F9 ...... 14,40:1  (painel do celular)
     submenu       #8FB4EA sobre #F2F2F2 ......  1,90:1  <== reprova
     submenu       #8FB4EA sobre ~#F4F4F4 .....  1,95:1  <== reprova

   O submenu de marcas nao estava apenas palido: 1,90:1 contra os 4,5:1 que a
   WCAG pede para texto. Com #2C4D90 ele passa a 7,30:1 no desktop e 7,4:1 no
   celular. O item de topo vira azul da marca ao passar o mouse, ao receber
   foco de teclado, no instante do clique e na pagina em que o visitante esta:
   #2C4D90 mede 8,17:1 sobre branco e 7,76:1 sobre o painel do celular — a
   troca muda a cor sem perder legibilidade.

   NO CELULAR O MENU NAO FICA DENTRO DO #Top_bar: o scripts.js do tema faz
   detach do nav#menu inteiro e o pendura em #Side_slide, de fundo #F9F9F9 —
   claro, e por isso o mesmo azul serve nos dois. Dai o :is(#Top_bar,
   #Side_slide), que cobre os dois contextos com peso de um id so.

   A cor mora no <span>, nao no <a>: o tema pinta o span, e no submenu a regra
   do proprio <a> continua vencendo a minha. E o span que aparece.
   A lista traz :hover E .hover: em toque nao existe pseudo-classe :hover, e o
   scripts.js do tema aplica a CLASSE .hover no <li> quando o submenu abre no
   painel do celular. Sem ela, tocar em PRODUTOS devolvia o rotulo ao #8FB4EA
   do tema — 2,02:1 sobre o painel.
   ========================================================================== */

:is(#Top_bar, #Side_slide) #menu ul.menu-main > li > a:is(:hover, :focus, :active),
:is(#Top_bar, #Side_slide) #menu ul.menu-main > li > a:is(:hover, :focus, :active) > span,
:is(#Top_bar, #Side_slide) #menu ul.menu-main > li:is(:hover, .hover, .current-menu-item, .current-menu-ancestor, .current-menu-parent, .current-portfolio-ancestor, .current-portfolio-parent) > a,
:is(#Top_bar, #Side_slide) #menu ul.menu-main > li:is(:hover, .hover, .current-menu-item, .current-menu-ancestor, .current-menu-parent, .current-portfolio-ancestor, .current-portfolio-parent) > a > span,
#menu ul.menu-main > li > a:is(:hover, :focus, :active) > span,
#menu ul.menu-main > li:is(:hover, .hover, .current-menu-item, .current-menu-ancestor, .current-menu-parent) > a > span {
    color: #2C4D90;
}

/* Submenu de marcas em repouso. */
:is(#Top_bar, #Side_slide) #menu ul.sub-menu > li > a,
:is(#Top_bar, #Side_slide) #menu ul.sub-menu > li > a > span,
#menu ul.sub-menu > li > a,
#menu ul.sub-menu > li > a > span {
    color: #2C4D90;
}

/* Submenu sob o ponteiro, sob o foco, e a marca em que o visitante esta:
   #1B3E87, o tom escuro da propria arte — 8,99:1 no mesmo fundo. */
:is(#Top_bar, #Side_slide) #menu ul.sub-menu > li > a:is(:hover, :focus),
:is(#Top_bar, #Side_slide) #menu ul.sub-menu > li > a:is(:hover, :focus) > span,
:is(#Top_bar, #Side_slide) #menu ul.sub-menu > li:is(:hover, .hover, .current-menu-item, .current-portfolio-ancestor, .current-portfolio-parent) > a,
:is(#Top_bar, #Side_slide) #menu ul.sub-menu > li:is(:hover, .hover, .current-menu-item, .current-portfolio-ancestor, .current-portfolio-parent) > a > span,
#menu ul.sub-menu > li > a:is(:hover, :focus) > span,
#menu ul.sub-menu > li:is(:hover, .hover, .current-menu-item, .current-portfolio-ancestor) > a > span {
    color: #1B3E87;
}

/* --------------------------------------------------------------------------
   Colunas da pagina de produto empilhadas abaixo de 992px.

   O WPBakery usa o corte "sm" do Bootstrap, que poe as colunas lado a lado ja
   a partir de 768px. Medido: nessa faixa a coluna da galeria fica com 260 a
   363px e as duas setas de 44px cobrem um terco da foto. O site adotou 992px
   como ponto de corte em 26/07 — aqui a pagina de produto passa a seguir o
   mesmo ponto.

   Escopo em .the_content_wrapper de proposito: a grade de RELACIONADOS fica
   fora dele e continua com varias colunas, que e o certo para ela.

   Empilhada, a galeria ganha teto de 480px para nao virar uma tela inteira de
   foto no tablet — a 768px ela iria a 708px de lado. Fica encostada a
   esquerda, no mesmo eixo do texto que passa a vir abaixo.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .single-portfolio .the_content_wrapper .wpb_column[class*="vc_col-sm-"] {
        width: 100%;
        float: none;
    }
    .single-portfolio .gyn-galeria { max-width: 480px; }
}

/* ==========================================================================
   Orçamento por produto — C2/C4 (01/08/2026).
   Linha de contexto no formulário das internas + CTA que rola até o form.
   O CTA é <a> chapado no padrão do submit (mesmo azul, mesma altura), com
   border zerada nos 4 lados de propósito — imune ao border-bottom:0 do
   mfn-custom 2019 (armadilha mordida 4x). inline-flex + line-height 1.2 é o
   mesmo par usado na conversão <a><button> do Lote 2.
   ========================================================================== */
.gyn-contexto-orcamento {
    text-align: center;
    color: #2C4D90;
    font-size: 17px;
    margin: 0 0 14px;
}
.gyn-cta-orcamento-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}
a.gyn-cta-orcamento,
a.gyn-cta-whats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none !important;
    border: 0 !important;
    line-height: 1.2;
}
a.gyn-cta-orcamento { background-color: #2C4D90 !important; }
a.gyn-cta-orcamento:hover { background-color: #1B3E87 !important; }
a.gyn-cta-orcamento:focus-visible { outline: 3px solid #1B3E87; outline-offset: 2px; }
/* Pedido do operador (01/08): fundo no tom OFICIAL do WhatsApp #25D366,
   igual ao balao flutuante. Com texto branco esse verde da 2,0:1 e reprova
   AA — por isso o rotulo usa o verde-noite #0B3B2E: 6,3:1 sobre o oficial
   (medido); hover #1FBE5B mantem 5,1:1 com o mesmo texto. */
a.gyn-cta-whats { background-color: #25D366 !important; color: #0B3B2E !important; }
a.gyn-cta-whats:hover { background-color: #1FBE5B !important; }
a.gyn-cta-whats:focus-visible { outline: 3px solid #0B3B2E; outline-offset: 2px; }
.gyn-ancora-orcamento { display: block; height: 0; }
#gyn-orcamento { scroll-margin-top: 130px; }

/* Modal do orçamento (01/08, padrão do site da MSG): o formulário sai do fim
   da página e abre ao clicar no CTA azul. O bloco só é MOVIDO por JS — sem
   JS a página mantém o formulário no lugar e o CTA rola até ele pela âncora,
   nada quebra. O × é <button>: border zerada explicitamente nos 4 lados
   (vacina do mfn-custom 2019). */
.gyn-modal-orc { position: fixed; inset: 0; z-index: 100000; display: none; }
.gyn-modal-orc.aberto { display: block; }
.gyn-modal-orc-fundo { position: absolute; inset: 0; background: rgba(15, 27, 46, 0.55); }
.gyn-modal-orc-caixa {
    position: relative;
    margin: 6vh auto 0;
    background: #fff;
    width: min(92%, 640px);
    max-height: 86vh;
    overflow: auto;
    padding: 34px 32px 26px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Formulário do modal empilhado na vertical (pedido de 01/08, espelho do
   modal da MSG): título à esquerda com filete da marca, um campo por linha
   na largura total. Escopo .gyn-modal-orc de propósito — na /empresa/ o
   mesmo form 1687 segue no layout de colunas. A regra de 3 classes vence o
   <style> inline do _form (1 classe) e a grade do bloco F (2 classes). */
.gyn-modal-orc .gyn-contexto-orcamento {
    text-align: left;
    font-size: 20px;
    color: #1c1c1c;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e5e5e5;
}
.gyn-modal-orc .gyn-contexto-orcamento::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    background: #2C4D90;
    margin-bottom: 10px;
}
.gyn-modal-orc .gyn-contexto-orcamento strong { color: #2C4D90; }
.gyn-modal-orc .wpcf7-form .gynprog-form-row { display: block; }
.gyn-modal-orc .wpcf7-form .gynprog-form-col {
    width: 100%;
    min-width: 0;
    margin: 0 0 18px;
}
.gyn-modal-orc .gyn-campo { width: 100%; }
.gyn-modal-orc .gyn-campo input[type="text"],
.gyn-modal-orc .gyn-campo input[type="tel"],
.gyn-modal-orc .gyn-campo input[type="email"] {
    width: 100%;
    min-height: 48px;
}
.gyn-modal-orc-fechar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
    background: transparent;
    color: #0f3560;
    cursor: pointer;
    border: 0 !important;
}
.gyn-modal-orc-fechar:hover { color: #1B3E87; }
.gyn-modal-orc-fechar:focus-visible { outline: 3px solid #1B3E87; outline-offset: 2px; }
html.gyn-modal-aberto, html.gyn-modal-aberto body { overflow: hidden; }

/* ==========================================================================
   B3 Fase 4 — tiles de grupos e sistemas nos arquivos do catálogo.
   Cards claros com nome no azul da marca; grupo sem produto entra apagado
   (gyn-tile-mudo) mas continua clicável — a página existe e explica (B2).
   ========================================================================== */
/* Medido na página da marca: o tema põe display:flex no .section_wrapper e o
   bloco de tiles, como ITEM flex, encolhia ao conteúdo (222px nos 955px da
   coluna) — a mesma armadilha do flex que já mordeu altura de miniatura.
   No escopo do meu bloco o wrapper volta a block e ocupa a coluna inteira. */
.gyn-eixo-secao .section_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-top: 30px;
}
.gyn-eixo-desc { color: #444; margin: 0 0 6px; max-width: 72ch; }
.gyn-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    margin: 16px 0 8px;
}
.gyn-tile {
    display: block;
    background: #fff;
    border: 1px solid #dfe5ee;
    padding: 16px;
    text-decoration: none !important;
}
.gyn-tile b { display: block; color: #2C4D90; font-size: 16px; line-height: 1.3; }
.gyn-tile span { display: block; color: #666; font-size: 13px; margin-top: 4px; }
.gyn-tile:hover { border-color: #2C4D90; }
.gyn-tile:focus-visible { outline: 3px solid #1B3E87; outline-offset: 2px; }
.gyn-tile-mudo b { color: #55606f; }

/* Grade dos ARQUIVOS do catálogo (marcas e eixos): caixa de imagem em
   proporção FIXA 4:3 com contain — receita do item D2 da auditoria. Medido
   na página de sistema: foto retrato rendia card de 488px ao lado de cinco
   de 323px e a grade ficava desproporcional; com a caixa fixa, todo card
   tem a mesma altura, qualquer que seja a foto de origem. */
.portfolio_group .image_frame .image_wrapper {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
}
.portfolio_group .image_frame .image_wrapper a {
    display: block;
    height: 100%;
}
.portfolio_group .image_frame .image_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Widget da lateral: alguma folha de 2019 esconde <br> (display:none —
   medido: NOSSOS+PRODUTOS emendados vazando da coluna). Os rótulos gerados
   passaram a usar espaço; o br volta ao normal por garantia e palavras
   compridas quebram dentro da coluna. */
.widget-area .textwidget br { display: inline; }
.widget-area .textwidget { overflow-wrap: break-word; }

/* E1 — ponte da vitrine da home para o catálogo completo da marca.
   Ajuste do operador (01/08): o contorno branco sumia na página e o botão
   nascia colado na faixa azul de baixo — agora é o CTA cheio do padrão do
   site (mesmo azul/geometria do SOLICITE UM ORÇAMENTO) com respiro: 30px
   para os cards acima e 46px antes do fim da seção. */
.gyn-ver-todos-wrap { text-align: center; margin: 30px 0 0; padding-bottom: 46px; }
/* padding e não margin embaixo: medido, a margem colapsava através dos
   contêineres e a faixa azul começava 9px abaixo do botão */
a.gyn-ver-todos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    background-color: #2C4D90 !important;
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none !important;
    border: 0 !important;
    line-height: 1.2;
}
a.gyn-ver-todos:hover { background-color: #1B3E87 !important; }
a.gyn-ver-todos:focus-visible { outline: 3px solid #1B3E87; outline-offset: 2px; }



/* ===== Dropdown PRODUTOS — 3º nível em CASCATA (14/08/2026) =====
   O tema abre o submenu de 3º nível como flyout lateral (be.css:1584 —
   position:absolute; left:200px; top:0). Pedido do operador: abrir em
   cascata, embaixo do item pai, empurrando os irmãos — e valendo para
   TODA marca que tiver subgrupos (regra genérica; hoje só a MSG tem).
   O reveal continua sendo o do tema (hover via JS); aqui muda só a
   geometria. Este bloco vence o be.css por ORDEM (seletor idêntico,
   impresso depois), sem precisar de !important. */
#Top_bar .menu li ul li ul {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    background: #f4f6f9;
    background-image: none;
    box-shadow: none;
}
#Top_bar .menu li ul li ul li {
    width: 100%;
}
/* recuo de filho: lê-se como item DENTRO da marca acima */
#Top_bar .menu li ul li ul li a {
    padding-left: 36px;
}
/* a seta de "tem subgrupo" passa a apontar para baixo */
#Top_bar .menu li ul li.menu-item-has-children > a .menu-arrow {
    transform: rotate(90deg);
}

/* ===== Busca — cinto contra texto sem espaços no resumo (14/08/2026) =====
   A correção de verdade é no PHP (payload de vc_raw_html removido do excerpt
   e busca restrita a produto publicado); este cinto garante que NENHUM texto
   sem espaço — presente ou futuro — estoure o container dos resultados. */
#Content .search_wrapper .search-content {
    overflow-wrap: anywhere;
}