/* ============================================================
   TIPOGRAFIA — substitui as variáveis do tema por:
   • Fraunces (serifa moderna humanista com optical sizing) nos
     títulos: elegante mas com letterforms abertas, legível.
   • Inter (sans-serif desenhado para UI) no corpo: o gold
     standard de legibilidade na web.
   Carregadas via Google Fonts em header.php; fallback genérico
   se a CDN falhar.
   ============================================================ */
:root {
    --pelocis-font:           "Inter", "Helvetica Neue", Arial, sans-serif;
    --pelocis-heading-font:   "Fraunces", "Georgia", serif;
    --pelocis-special-font:   "Fraunces", "Georgia", serif;
    --pelocis-special-font2:  "Fraunces", "Georgia", serif;
}
body {
    font-family: var(--pelocis-font);
}
/* Fraunces tem optical sizing — usa o eixo opsz para ajustar
   automaticamente o desenho dos glifos conforme o font-size. */
.sec-title__title,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--pelocis-heading-font);
    font-optical-sizing: auto;
}

/* Hero das páginas internas: imagem 100% width + título e breadcrumb sobrepostos centralizados */
.page-header {
    position: relative;
    background-color: transparent;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    height: 420px;
    display: block;
    overflow: hidden;
}
@media (max-width: 767px) {
    .page-header { height: 280px; }
}

/* Imagem ocupa toda a section */
.page-header__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
}
.page-header__bg__img {
    clip-path: none;
    background-position: center;
    background-size: cover;
}
/* Overlay sutil para legibilidade do texto branco */
.page-header__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.45) 100%);
    z-index: 2;
    pointer-events: none;
}
.page-header__bg__shape-1,
.page-header__bg__shape-2,
.page-header__shape {
    display: none !important;
}

/* Container do título: centralizado vertical e horizontalmente sobre a imagem */
.page-header .container {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.page-header__title {
    display: block !important;
    color: var(--pelocis-white, #fff);
    font-size: 32px;
    line-height: 1.2;
    margin: 50px 0 12px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    text-transform: initial;
}
@media (min-width: 768px) {
    .page-header__title { font-size: 48px; }
}
.page-header .pelocis-breadcrumb {
    display: inline-flex !important;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto !important;
}
.page-header .pelocis-breadcrumb li {
    color: var(--pelocis-white, #fff);
    text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.page-header .pelocis-breadcrumb li:last-of-type {
    color: var(--pelocis-base, #e2a475);
}
.page-header .pelocis-breadcrumb li a {
    color: var(--pelocis-white, #fff);
}
.page-header .pelocis-breadcrumb li a:hover {
    color: var(--pelocis-base, #e2a475);
}

/* Seção "Como começar um processo de análise" (home.php) — alarga cards, calibra tipografia
   e centraliza/diminui o ícone circular. Override do pelocis.min.css. */
.work-process-three__card {
    max-width: 360px;
}
.work-process-three__card__content {
    padding: 82px 28px 30px;
}
.work-process-three__card__title {
    font-size: 20px;
}
.work-process-three__card__text {
    font-size: 16px;
    line-height: 26px;
}
/* Ícone (imagem circular do topo): menor e centralizado dentro do card.
   max-width limita o diâmetro do círculo; margin auto centraliza horizontalmente. */
.work-process-three__card__img {
    max-width: 200px;
    margin: 0 auto;
}

/* Footer: substituir a imagem footer-bg.png por um gradiente elegante.
   Combina um radial-gradient dourado (cor de marca) decaindo para o canto
   superior direito + um leve halo no canto inferior esquerdo + base preta
   levemente quente — dá profundidade sem imagem e fica leve no carregamento.
   !important para sobrescrever o style="background-image: url(...)" inline. */
.main-footer__bg.background-black {
    background-image:
        radial-gradient(ellipse at top right, rgba(226, 164, 117, 0.18), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(226, 164, 117, 0.10), transparent 50%),
        linear-gradient(180deg, #1a1410 0%, #0a0805 100%) !important;
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
}

/* Footer "Posts Recentes": padronizar thumbnails para evitar distorção.
   Container 70x70 SEM overflow:hidden (para o badge .__number poder vazar);
   o recorte circular é aplicado direto no <img>. */
.footer-widget--post__img {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}
.footer-widget--post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 50%;
}

/* Cards de blog (home + publicacoes): padronizar altura da descrição em 4 linhas
   para que todos os cards do grid fiquem com a mesma altura, independente do tamanho do resumo. */
.blog-card-three__text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.6em * 4);
}
/* Título também padronizado em 2 linhas para alinhar a base dos cards. */
.blog-card-three__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.3em * 2);
}

/* ============================================================
   Sidebar > "Como funciona" (servico.php) — fundo na cor primária
   Fix: container não tinha background, e os textos internos são
   brancos (definidos em _insaite/css/style.css:287-340), o que
   resultava em texto branco em fundo branco (invisível).
   ============================================================ */
.service-sidebar__how-it-works {
    position: relative;
    background-color: var(--color_primary, #E89F4D);
    padding: 30px 28px 28px;
    border-radius: 8px;
    overflow: hidden;
    color: #fff;
}
.service-sidebar__how-it-works .service-sidebar__title {
    color: #fff;
}
.service-sidebar__how-it-works .shape-1,
.service-sidebar__how-it-works .shape-2 {
    opacity: 0.18;
    pointer-events: none;
}

/* ============================================================
   FIX — work-process-three (home: "Como começar um processo de análise")
   1) O container .work-process-three__card__img tinha o mesmo bug do
      .home-services__card__image: o <picture> está em position:absolute
      (style.css:670-681) e sem aspect-ratio o container colapsava para
      altura 0, fazendo o __content (com margin-top:-122) subir até o
      topo do card e levar o número 01/02/03 ao centro do círculo. Com
      aspect-ratio:1 o ícone tem altura, o __content senta no lugar
      certo e o número fica sentado na parte inferior do círculo.
   2) Título da seção precisa de respiro e z-index acima dos cards.
   ============================================================ */
.work-process-three__card__img {
    aspect-ratio: 1 / 1;
}
.work-process-three .sec-title {
    margin-bottom: 40px;
    position: relative;
    z-index: 5;
}

/* ============================================================
   FIX — home-services__card (home + servicos.php)
   _insaite/css/style.css:670-681 coloca .home-services__card__image
   picture em position:absolute; inset:0 — isso retira o <picture> do
   fluxo, e como o container .home-services__card__image não tinha
   altura própria, colapsa para 0 e a imagem some atrás do overflow:
   hidden do card (pelocis.css:16013). Damos aspect-ratio ao container
   para reservar espaço e forçamos z-index acima das shapes pretas.
   ============================================================ */
.home-services__card__image {
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 2;
}
.home-services__card__image picture,
.home-services__card__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.home-services__card__shape--one,
.home-services__card__shape--two {
    z-index: 1;
}
.home-services__card__hover,
.home-services__card__link {
    z-index: 3;
}

/* about-one__image: regras de aspect-ratio mantidas em
   _insaite/css/style.css:549-572 (carregado depois deste arquivo). */

/* ============================================================
   .service-sidebar__single (não-how-it-works): unificar título +
   nav num único bloco com fundo bege, padding consistente e
   border-radius. Antes o título tinha fundo bege próprio
   (pelocis.css:8441-8448) e o __nav outro bloco, criando desnível
   visual; aqui o __single passa a ser o container visual, e
   título/nav perdem fundo próprio para herdarem o do pai.
   ============================================================ */
.service-sidebar__single:not(.service-sidebar__how-it-works) {
    background-color: var(--pelocis-gray, #F5F2EF);
    padding: 30px 24px;
    border-radius: 8px;
}
.service-sidebar__single:not(.service-sidebar__how-it-works) .service-sidebar__nav {
    background-color: transparent;
    padding: 0;
}

/* Título sempre transparente — vale para a sidebar inteira ("Veja Mais
   Serviços" no bloco bege, e "Como Funciona" no bloco laranja
   __how-it-works). pelocis.css aplica fundo bege padrão; removemos. */
.service-sidebar__title {
    background-color: transparent;
    padding: 0 0 20px 0;
}

/* ============================================================
   QUOTES-SLIDER (frases inspiradoras) — ajuste de altura
   Override dos defaults de _insaite/css/style.css para reduzir a
   presença vertical do box laranja e garantir clearance do footer.
   ============================================================ */
.quotes-slider {
    padding: 30px 0 0;
}
.quotes-slider__inner {
    padding: 32px 40px;
    /* Quanto o box protrude para dentro do footer (negativo = sobreposição).
       Reduzido de -138px para -90px; o padding-top do footer compensa. */
    margin-bottom: -90px;
}
.quotes-slider__box {
    min-height: 170px;
    padding: 0 70px;
}
.quotes-slider__item {
    min-height: 130px;
}

/* Footer da home: padding-top compensa a sobreposição do box laranja
   (margin-bottom: -90px) e ainda deixa ~50px de respiro até o conteúdo
   ("Ana Carla Risson", colunas de links e cards do blog). */
.main-footer--home-two .main-footer__top {
    padding-top: 140px;
}

@media (max-width: 768px) {
    .quotes-slider__inner {
        padding: 26px 22px;
        margin-bottom: -60px;
        border-radius: 50px;
    }
    .quotes-slider__box {
        min-height: 150px;
        padding: 0 24px;
    }
    .quotes-slider__item { min-height: 120px; }
    .main-footer--home-two .main-footer__top {
        padding-top: 100px;
    }
}

/* Coluna de texto do footer: ocupa toda a largura disponível
   da coluna mas mantém respiro à direita pra não colar em outro widget. */
.footer-widget__text {
    max-width: 100%;
    padding-right: 50px;
}

/* ============================================================
   RESPONSIVIDADE MOBILE/TABLET — fixes essenciais
   Tema é desktop-first com padding/margin pesados (100-120px) sem
   media query mobile. Cards e imagens com aspect-ratio fixo. Inputs
   sem font-size mínimo (causa zoom no iOS). Shapes decorativos
   poluem o pequeno viewport. Tudo isso é corrigido aqui via overrides.
   ============================================================ */

/* --- Bloco 3a: anti-zoom iOS (todos os viewports) --- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="date"],
textarea,
select {
    font-size: 16px;
}

/* --- Bloco 6: sidebar do servico.php em tablet/mobile --- */
@media (max-width: 991px) {
    .service-details + .service-sidebar,
    .col-lg-8 + .col-lg-4 .service-sidebar {
        margin-top: 30px;
    }
}

/* --- Mobile (<768px) --- */
@media (max-width: 767px) {
    /* Bloco 1: padding/margin de seções (tema usa 100-120px) */
    .work-process-three,
    .service-one-home,
    .blog-three,
    .about-one,
    .history-two,
    .footer-one,
    .main-footer__top {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    /* Inline padding-top:150px em home.php:214 — neutralizar aqui.
       Em entrega futura, remover o inline e usar a classe. */
    section.blog-three[style*="padding-top"] {
        padding-top: 50px !important;
    }

    /* Bloco 2: aspect-ratio fallback para imagens (evitar verticais alongadas) */
    .home-services__card__image { aspect-ratio: 4 / 3; }
    .history-two__images img    { aspect-ratio: 4 / 3; }

    /* Bloco 3b: touch targets ≥ 44px (Apple HIG) */
    .pelocis-btn,
    .main-menu__list li a,
    .service-sidebar__nav a,
    .pelocis-breadcrumb li a,
    .footer-widget__list li a,
    .blog-card-three__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Bloco 4: setas Owl Carousel maiores */
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next,
    .main-slider-three .owl-nav button {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    /* Bloco 5: ocultar shapes decorativos (todos aria-hidden, puro estilo) */
    .work-process-three__shape,
    .work-process-three__card__shape-one,
    .service-one-home__shape-one,
    .service-one-home__shape-two,
    .service-one-home__shape-three,
    .home-services__card__shape--one,
    .home-services__card__shape--two,
    .main-slider-three__item--shape-1,
    .main-slider-three__item--shape-2,
    .page-header__shape,
    .about-one__title__shape,
    .blog-card-three__shape {
        display: none;
    }
}

/* ============================================================
   PÁGINAS LEGAIS — termos, privacidade, cookies
   Layout 2-col em desktop (TOC sticky + conteúdo). Em mobile
   colapsa em 1 col, com TOC como bloco normal antes do conteúdo.
   Tipografia legível (max-width ~70ch), seções numeradas com
   âncora, "Última atualização" prominente, print-friendly.
   ============================================================ */
html { scroll-behavior: smooth; }

.legal-page { padding: 60px 0 80px; }
@media (max-width: 767px) { .legal-page { padding: 40px 0 60px; } }

/* ---------- TOC (Table of Contents) ---------- */
.legal-toc-wrap { margin-bottom: 32px; }
@media (min-width: 992px) {
    .legal-toc-wrap { margin-bottom: 0; }
    .legal-toc {
        position: sticky;
        top: 110px;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        padding-right: 8px;
    }
}
.legal-toc__title {
    font-family: var(--pelocis-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pelocis-text-gray, #7e7e7e);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pelocis-border-color, #ddd);
}
.legal-toc__list { list-style: none; padding: 0; margin: 0; }
.legal-toc__list li { margin: 0; }
.legal-toc__link {
    display: block;
    padding: 10px 14px 10px 16px;
    font-family: var(--pelocis-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--pelocis-text-dark, #4a4a4a);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    min-height: 44px;
}
.legal-toc__link:hover,
.legal-toc__link:focus-visible {
    color: var(--color_primary, #E89F4D);
    border-left-color: var(--color_primary, #E89F4D);
    background-color: rgba(232, 159, 77, 0.06);
    outline: none;
}
.legal-toc__link.is-active {
    color: var(--color_primary, #E89F4D);
    border-left-color: var(--color_primary, #E89F4D);
    background-color: rgba(232, 159, 77, 0.08);
    font-weight: 600;
}

/* ---------- Conteúdo ---------- */
.legal-content { padding-left: 0; }
@media (min-width: 992px) { .legal-content { padding-left: 16px; } }

.legal-meta {
    padding-bottom: 24px;
    margin-bottom: 36px;
    border-bottom: 1px solid var(--pelocis-border-color, #ddd);
}
.legal-meta__label {
    font-family: var(--pelocis-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color_primary, #E89F4D);
    margin: 0 0 8px;
}
.legal-meta__title {
    font-family: var(--pelocis-heading-font);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--pelocis-black, #222);
    margin: 0 0 12px;
    max-width: 25ch;
}
@media (max-width: 767px) {
    .legal-meta__title { font-size: 24px; }
}
.legal-meta__updated {
    font-family: var(--pelocis-font);
    font-size: 13px;
    color: var(--pelocis-text-gray, #7e7e7e);
    margin: 0;
}
.legal-meta__updated span { font-weight: 600; }

.legal-intro {
    font-family: var(--pelocis-font);
    font-size: 18px;
    line-height: 1.7;
    color: var(--pelocis-text-dark, #4a4a4a);
    max-width: 70ch;
    margin: 0 0 40px;
}
@media (max-width: 767px) {
    .legal-intro { font-size: 16px; }
}

/* ---------- Sections ---------- */
.legal-section {
    max-width: 70ch;
    margin: 0 0 40px;
    scroll-margin-top: 110px;
}
.legal-section:last-of-type { margin-bottom: 0; }

.legal-section__title {
    font-family: var(--pelocis-heading-font);
    font-size: 22px;
    font-weight: 600;
    color: var(--pelocis-black, #222);
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.legal-section__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background-color: var(--color_primary, #E89F4D);
    color: #fff;
    border-radius: 4px;
    font-family: var(--pelocis-font);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.legal-section p {
    font-family: var(--pelocis-font);
    font-size: 16px;
    line-height: 1.75;
    color: var(--pelocis-text-dark, #4a4a4a);
    margin: 0 0 12px;
}
.legal-section p:last-child { margin-bottom: 0; }

.legal-section a,
.legal-meta a {
    color: var(--color_primary, #E89F4D);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.legal-section a:hover { text-decoration-thickness: 2px; }

.legal-list {
    padding-left: 0;
    list-style: none;
    margin: 0 0 16px;
}
.legal-list li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-family: var(--pelocis-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--pelocis-text-dark, #4a4a4a);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.legal-list li:last-child { border-bottom: none; }
.legal-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color_primary, #E89F4D);
}

.legal-callout {
    margin: 16px 0 0;
    padding: 16px 20px;
    background-color: rgba(232, 159, 77, 0.08);
    border-left: 3px solid var(--color_primary, #E89F4D);
    border-radius: 0 4px 4px 0;
    font-family: var(--pelocis-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--pelocis-text-dark, #4a4a4a);
}

/* ---------- Footer ---------- */
.legal-footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--pelocis-border-color, #ddd);
}
.legal-back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-family: var(--pelocis-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--color_primary, #E89F4D);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color .2s ease;
    min-height: 44px;
}
.legal-back-to-top:hover,
.legal-back-to-top:focus-visible {
    background-color: rgba(232, 159, 77, 0.08);
    text-decoration: underline;
    outline: none;
}

/* ---------- Print ---------- */
@media print {
    .topbar-one, .main-header, .page-header,
    .legal-toc-wrap, .legal-back-to-top,
    .main-footer, .whatsapp-float { display: none !important; }
    .legal-content { padding: 0; max-width: 100%; }
    .legal-section { break-inside: avoid; max-width: 100%; }
    .legal-section__number {
        background: none !important;
        color: var(--pelocis-black, #222) !important;
        padding: 0;
    }
    .legal-callout {
        background: none !important;
        border-left: 2px solid #000;
    }
}

/* ============================================================
   ACESSIBILIDADE — skip-to-content link
   Visível apenas com :focus, permitindo que usuários de teclado
   pulem direto para o conteúdo principal, contornando o header.
   ============================================================ */
.skip-to-content {
    position: absolute;
    top: -48px;
    left: 8px;
    z-index: 10000;
    padding: 10px 18px;
    background: #fff;
    color: #222;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--color_primary, #E89F4D);
    outline-offset: 2px;
    color: #222;
}

/* visually-hidden: oculto visualmente, ainda indexado por buscadores e
   acessível para leitores de tela. Usado para H1 da home. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   FORM .form-one — extensão dos seletores para novos input types
   O pelocis.min.css só estiliza input[type=text] e input[type=email].
   Depois da Fase 6 (type=tel semântico no telefone) o campo perdia
   border, padding e height. Replicamos a mesma regra aqui para
   tel/search/url, garantindo visual consistente.
   ============================================================ */
.form-one input[type="tel"],
.form-one input[type="search"],
.form-one input[type="url"],
.form-one input[type="number"] {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 26px;
    border: none;
    outline: none;
    padding: 10px 20px;
    height: 48px;
    border: 0.5px solid #d3d3d3;
    border-radius: 8px;
    color: var(--pelocis-text-dark, #636363);
    background-color: transparent;
}
.form-one input[type="tel"]:focus,
.form-one input[type="search"]:focus,
.form-one input[type="url"]:focus,
.form-one input[type="number"]:focus {
    border-color: var(--pelocis-base, #dd9947);
}

/* ============================================================
   HEADER MOBILE — correção definitiva (issue: CTA esmagando
   hambúrguer, topbar overflow, título atrás do sticky header,
   z-index conflito com WhatsApp float).
   Decisões de produto:
   - CTA "Agende sua sessão" sai do header em mobile (WhatsApp
     float assume o papel de CTA persistente);
   - Topbar (email + endereço + FAQ) oculta em <768px;
   - Logo escalável sem overflow.
   ============================================================ */

/* --- 1. Re-esconder CTA do header em mobile ---
   site-overrides.css:398 força .pelocis-btn { display:inline-flex }
   em <767px, anulando o display:none de .main-header__btn do tema.
   Aumenta especificidade para vencer essa regra. */
@media (max-width: 767px) {
    .main-header__btn,
    a.pelocis-btn.main-header__btn {
        display: none !important;
    }
}

/* --- 2. Ocultar topbar em mobile --- */
@media (max-width: 767px) {
    .topbar-one { display: none; }
}

/* --- 3. Layout flex explícito do header em mobile ---
   HTML aplica style="width:100%" inline em .main-header__right
   mas sem direção flex; resultado é stack natural sem alinhamento. */
@media (max-width: 767px) {
    .main-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .main-header__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
    }
    .mobile-nav__btn {
        width: 32px;
        height: 32px;
        padding: 4px 0;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mobile-nav__btn span {
        width: 24px;
    }
}

/* --- 4. Logo mobile: tamanho legível, sem overflow ---
   _insaite/css/style.css:647 força width:200px; substituímos por
   width:auto + max-width para preservar aspect-ratio natural. */
@media (max-width: 767px) {
    .main-header__logo {
        flex: 0 1 auto;
        min-width: 0;
    }
    .main-header__logo a img,
    .main-header__logo img {
        width: auto;
        max-width: 160px;
        height: auto;
    }
}
@media (max-width: 375px) {
    .main-header__logo a img,
    .main-header__logo img {
        max-width: 140px;
    }
}

/* --- 5. scroll-margin-top global em seções ---
   .sticky-header--cloned (position:fixed; top:0; ~80px) cobre o início
   de seções ao scroll/anchor. .legal-section já tem; generalizar. */
.about-one,
.work-process-three,
.service-one-home,
.blog-three,
.history-two,
.service-details,
.blog-details,
.contato-section,
.page-header + section,
section[id] {
    scroll-margin-top: 110px;
}
@media (max-width: 767px) {
    .about-one,
    .work-process-three,
    .service-one-home,
    .blog-three,
    .history-two,
    .service-details,
    .blog-details,
    .contato-section,
    .page-header + section,
    section[id] {
        scroll-margin-top: 80px;
    }
}

/* --- 6. Z-index: drawer acima do WhatsApp float + esconde float quando drawer aberto ---
   Atual: whatsapp-float (9998) > mobile-nav__wrapper (999).
   pelocis.js:289-295 já aplica body.locked quando drawer abre. */
.mobile-nav__wrapper { z-index: 9999 !important; }

body.locked .whatsapp-float {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

/* --- 7. Clearance do header absoluto em mobile ---
   .main-header é position:absolute; em mobile (sem topbar) começa
   em top:15px com ~70px de altura. Páginas sem .page-header (home,
   contato) podem ter conteúdo atrás do header. Exclui sliders/heros
   que intencionalmente devem ter o header sobreposto. */
@media (max-width: 767px) {
    #main-content > section:first-of-type:not(.main-slider-three):not(.page-header) {
        padding-top: 110px;
    }
}

/* --- 8. Drawer: a11y (foco visível + overscroll contain) --- */
.mobile-nav__wrapper.expanded .mobile-nav__content {
    overscroll-behavior: contain;
}
.mobile-nav__content .main-menu__list li a:focus-visible,
.mobile-nav__close:focus-visible {
    outline: 2px solid var(--pelocis-base, #dd9947);
    outline-offset: 2px;
}

/* --- 9. Hero slider: neutralizar animação de entrada (CLS fix) ---
   pelocis.min.css aplica opacity:0 + transform:translatex(50%) scalex(2) +
   filter:blur(10px) no .main-slider-three__image, restaurando só após
   transition de 1000ms + delay 1500ms quando o owl-item ganha .active.
   PageSpeed Desktop mediu CLS 0,543 por causa dessa transição.
   Estado final aplicado imediatamente elimina o shift sem mudar layout. */
.main-slider-three__image {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}