/* =========================================================
   MODELO 03 — A PÁGINA DE VENDA

   Divide a linhagem com o modelo 02: mesmas seções, mesmo contrato de
   dados, mesmos papéis de cor. O conteúdo de um cliente troca de modelo
   sem ser reescrito, e é essa a razão de não ser um tema à parte.

   O que este arquivo faz de diferente:

   - O topo tem DUAS colunas por padrão, e a da direita é o formulário.
     A regra que liga isso é `:has(.lp-hero__form)`, a mesma que o 02 usa
     para a foto — não há classe extra para quem escreve lembrar.

   - No celular, a conversão mora numa barra fixa no rodapé da tela
     (`.lp-actionbar`), não num botão redondo de 60px. São dois alvos
     grandes, com rótulo, sempre à mão.

   - O ritmo é mais curto: cada seção termina perto de uma ação.

   As cores, as medidas do logo e a escala do título continuam vindo do
   cadastro do cliente (partials/tokens.blade.php), e os nomes das
   variáveis descrevem PAPEL, não cor: `--lp-primary` e `--lp-brand`, não
   "navy" e "gold", que viram mentira no primeiro cliente verde. A cor do
   texto sobre a marca é calculada pela luminância da própria cor.

   O verde segue reservado ao WhatsApp: o botão que converte não compete
   com enfeite nenhum.
   ========================================================= */


/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--lp-font-sans);
    color: var(--lp-text);
    background: var(--lp-bg);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--lp-primary); text-decoration: none; transition: color .2s var(--lp-ease); }
a:hover { color: var(--lp-primary-dark); }
button { font-family: inherit; cursor: pointer; }
ul, ol { padding-left: 1.25rem; }
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .75em;
    color: var(--lp-text);
    letter-spacing: -.02em;
}
/* Títulos em Poppins: geométrico como o wordmark, tracking levemente fechado
   (Poppins é mais aberta que a Manrope anterior, então -.03em apertava demais) */
h1, h2, h3 {
    font-family: var(--lp-font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.14;
}
h3 { letter-spacing: -.01em; }
h1 { font-size: clamp(2.125rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
p { margin: 0 0 1rem; color: var(--lp-text-soft); }

/* ---------- LAYOUT HELPERS ---------- */
.lp-container {
    width: 100%;
    max-width: var(--lp-container);
    margin: 0 auto;
    padding: 0 var(--lp-gutter);
}
.lp-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.lp-section--alt { background: var(--lp-bg-alt); }
.lp-section--dark { background: var(--lp-bg-dark); color: #fff; }
.lp-section--dark h1, .lp-section--dark h2, .lp-section--dark h3 { color: #fff; }
.lp-section--dark p { color: rgba(255, 255, 255, .75); }

.lp-section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
/* Sobrescritura: losango dourado do logotipo + rótulo em caixa alta */
.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    /* Mesmo desenho do "SERVIÇOS CONTÁBEIS" do logotipo: Poppins em caixa
       alta com tracking aberto */
    font-family: var(--lp-font-display);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--lp-brand-on-light);
    margin-bottom: .875rem;
}
.lp-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: var(--lp-brand);
    transform: rotate(45deg);
}
.lp-section-head .lp-eyebrow { justify-content: center; }
/* Sobre fundo escuro o dourado clareia para manter o contraste */
.lp-hero .lp-eyebrow,
.lp-page-hero .lp-eyebrow,
.lp-section--dark .lp-eyebrow,
.lp-single__cta .lp-eyebrow {
    color: var(--lp-brand-on-dark);
}
.lp-hero .lp-eyebrow::before,
.lp-page-hero .lp-eyebrow::before,
.lp-section--dark .lp-eyebrow::before,
.lp-single__cta .lp-eyebrow::before {
    background: var(--lp-brand-on-dark);
}

/* ---------- BUTTONS ---------- */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.6rem;
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--lp-radius-sm);
    border: 0;
    cursor: pointer;
    transition: transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease), background .2s var(--lp-ease);
    line-height: 1;
    white-space: nowrap;
}
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn--primary { background: var(--lp-primary); color: var(--lp-on-primary); box-shadow: 0 6px 16px var(--lp-primary-shadow); }
.lp-btn--primary:hover { background: var(--lp-primary-dark); color: #fff; box-shadow: 0 10px 22px rgba(13, 27, 42, .26); }
/* Botão dourado: usado quando o marinho da primária não teria contraste */
.lp-btn--brand { background: var(--lp-brand); color: var(--lp-on-brand); box-shadow: 0 6px 16px var(--lp-brand-shadow); }
.lp-btn--brand:hover { background: var(--lp-brand-on-dark); color: var(--lp-on-brand); box-shadow: 0 10px 22px var(--lp-brand-shadow-strong); }
.lp-btn--whatsapp { background: var(--lp-accent); color: var(--lp-on-accent); box-shadow: 0 6px 16px var(--lp-accent-shadow); }
.lp-btn--whatsapp:hover { background: var(--lp-accent-dark); color: var(--lp-on-accent); box-shadow: 0 10px 22px var(--lp-accent-shadow-strong); }
.lp-btn--whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
.lp-btn--ghost { background: transparent; color: var(--lp-text); border: 1.5px solid var(--lp-border); }
.lp-btn--ghost:hover { border-color: var(--lp-primary); color: var(--lp-primary); }
/* Secundário sobre fundo escuro: fio dourado da marca no lugar do branco puro */
.lp-btn--light { background: rgba(255, 255, 255, .08); color: #fff; backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--lp-brand) 55%, transparent); }
.lp-btn--light:hover { background: var(--lp-brand-tint); border-color: var(--lp-brand); color: var(--lp-brand-on-dark); }
@media (max-width: 520px) {
    .lp-hero__cta { flex-direction: column; align-items: stretch; }
    .lp-hero__cta .lp-btn { justify-content: center; }
}

/* Pular para o conteúdo.
   Fica fora da tela até receber foco, que é o ponto: serve a quem navega por
   teclado e não deve aparecer para os demais. Sem esta regra o link virava a
   primeira linha visível de TODAS as páginas — o HTML já o trazia. */
.lp-skip {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    padding: .75rem 1.25rem; border-radius: 0 0 var(--lp-radius-sm) 0;
    background: var(--lp-primary); color: var(--lp-on-primary);
    font-weight: 600; text-decoration: none;
}
.lp-skip:focus { left: 0; }

/* ---------- HEADER ---------- */
.lp-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    transition: background .3s var(--lp-ease), box-shadow .3s var(--lp-ease), backdrop-filter .3s var(--lp-ease);
}
.lp-header.is-scrolled,
.lp-header.is-inner {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--lp-shadow-sm);
}
/* A barra do admin cobre o topo fixo enquanto o cliente está logado */
.admin-bar .lp-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .lp-header { top: 46px; }
}
.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--lp-header-h);
    gap: 1.5rem;
}
.lp-logo {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
    line-height: 0; /* remove inline-gap residual */
}
.lp-logo img-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}
/* Reset força aspecto correto independente dos atributos width/height que o WP injeta */
.lp-logo img,
.lp-logo img {
    height: calc(var(--lp-logo-h) * var(--lp-logo-mobile-ratio));
    width: auto;
    max-width: calc(var(--lp-logo-max) * var(--lp-logo-mobile-ratio));
    display: block;
    object-fit: contain;
    transition: filter .3s var(--lp-ease), opacity .3s var(--lp-ease);
}
@media (min-width: 720px) {
    .lp-logo img,
    .lp-logo img { height: var(--lp-logo-h); max-width: var(--lp-logo-max); }
}
/* Marca em duas versões: a negativa sobre o hero escuro, a positiva quando o
   topo vira branco. A positiva segura o espaço; a negativa fica sobreposta. */
.lp-logo--switch { position: relative; }
.lp-logo--switch .lp-logo__img--dark { position: absolute; top: 0; left: 0; }
.lp-logo--switch .lp-logo__img--light { opacity: 0; }
.lp-header.is-scrolled .lp-logo__img--dark,
.lp-header.is-inner .lp-logo__img--dark { opacity: 0; }
.lp-header.is-scrolled .lp-logo__img--light,
.lp-header.is-inner .lp-logo__img--light { opacity: 1; }
/* Logo enviado pelo cliente: não sabemos se é positivo ou negativo, então
   ganha uma sombra leve para não sumir no hero escuro. */
.lp-header:not(.is-scrolled):not(.is-inner) .lp-logo img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.lp-logo__text {
    font-weight: 700;
    font-size: 1.0625rem;
    color: #fff;
    letter-spacing: -.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    line-height: 1;
}
.lp-header.is-scrolled .lp-logo__text,
.lp-header.is-inner .lp-logo__text { color: var(--lp-text); text-shadow: none; }
/* Logo no rodapé escuro */
.lp-footer .lp-logo img,
.lp-footer .lp-logo img {
    height: var(--lp-logo-h-hero);
    max-width: var(--lp-logo-max-hero);
}

.lp-nav { display: none; }
.lp-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 2rem; }
.lp-nav a {
    color: rgba(255, 255, 255, .92);
    font-weight: 500;
    font-size: .95rem;
    position: relative;
}
.lp-nav a:hover { color: #fff; }
.lp-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 2px;
    background: var(--lp-brand-on-dark); /* sobre o topo escuro; no topo branco vira azul */
    transition: width .25s var(--lp-ease);
}
.lp-nav a:hover::after,
.lp-nav a.is-active::after,
.lp-nav li.is-current > a::after { width: 100%; }
.lp-nav a.is-active,
.lp-nav li.is-current > a { color: #fff; }
.lp-header.is-scrolled .lp-nav a,
.lp-header.is-inner .lp-nav a { color: var(--lp-text-soft); }
.lp-header.is-scrolled .lp-nav a:hover,
.lp-header.is-inner .lp-nav a:hover,
.lp-header.is-scrolled .lp-nav a.is-active,
.lp-header.is-inner .lp-nav a.is-active,
.lp-header.is-scrolled .lp-nav li.is-current > a,
.lp-header.is-inner .lp-nav li.is-current > a { color: var(--lp-primary); }
.lp-header.is-scrolled .lp-nav a::after,
.lp-header.is-inner .lp-nav a::after { background: var(--lp-primary); }

.lp-header__cta { display: none; }

.lp-burger {
    background: transparent;
    border: 0;
    width: 44px; height: 44px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
}
.lp-burger span {
    display: block;
    width: 22px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s var(--lp-ease), opacity .25s var(--lp-ease), background .25s var(--lp-ease);
}
.lp-header.is-scrolled .lp-burger span,
.lp-header.is-inner .lp-burger span { background: var(--lp-text); }
body.menu-open .lp-burger span { background: var(--lp-text); }
body.menu-open .lp-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .lp-burger span:nth-child(2) { opacity: 0; }
body.menu-open .lp-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile menu */
.lp-mobile-menu {
    position: fixed;
    inset: var(--lp-header-h) 0 0;
    background: #fff;
    z-index: 99;
    padding: 2rem var(--lp-gutter);
    transform: translateX(100%);
    transition: transform .3s var(--lp-ease);
    overflow-y: auto;
}
body.menu-open .lp-mobile-menu { transform: translateX(0); }

/* Com o painel ocupando a tela inteira, a página atrás não pode continuar
   rolando: quem abria o menu no meio da página, rolava sem querer e fechava,
   voltava para outro lugar. */
body.menu-open { overflow: hidden; }
.lp-mobile-menu ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.lp-mobile-menu li { border-bottom: 1px solid var(--lp-border); }
/* `:not(.lp-btn)` não é enfeite: sem ele este seletor [0,1,1] ganha de
   `.lp-btn` [0,1,0] e impõe `display: block` e `padding: 1rem 0` ao botão de
   WhatsApp que fica no pé do menu. O ícone e o texto empilhavam, sem recuo
   lateral, colados à esquerda — e a cor do texto também vinha daqui, por cima
   da do botão. */
.lp-mobile-menu a:not(.lp-btn) {
    display: block;
    padding: 1rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--lp-text);
}
/* Submenu no celular: fica aberto, só recuado — nada de acordeão para abrir. */
.lp-mobile-menu .sub-menu { margin: 0; padding-left: 1rem; border-top: 1px solid var(--lp-border); }
.lp-mobile-menu .sub-menu li:last-child { border-bottom: 0; }
.lp-mobile-menu .sub-menu a { font-size: 1rem; padding: .8rem 0; color: var(--lp-text-soft); }
.lp-mobile-menu .lp-btn { width: 100%; justify-content: center; margin-top: .5rem; }

/* ---------- HERO ---------- */
.lp-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--lp-on-primary);
    overflow: hidden;
    padding: calc(var(--lp-header-h) + 3rem) 0 4rem;
    background: linear-gradient(148deg, var(--lp-primary-deeper) 0%, var(--lp-primary) 55%, var(--lp-primary-soft) 100%);
}
/* Filetes horizontais discretos: referência ao papel pautado dos livros contábeis */
.lp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, .03) 0 1px,
        transparent 1px 40px
    );
}
.lp-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.lp-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(148deg,
        color-mix(in srgb, var(--lp-primary-deeper) 92%, transparent) 0%,
        color-mix(in srgb, var(--lp-primary) 86%, transparent) 55%,
        color-mix(in srgb, var(--lp-primary-soft) 80%, transparent) 100%);
    z-index: 1;
}
.lp-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-block: auto; /* centraliza no espaço acima da faixa de serviços */
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
.lp-hero__content {
    max-width: 58rem;
    margin: 0 auto;
    text-align: center;
}
.lp-hero h1 {
    font-size: var(--lp-hero-scale);
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    /* Sem `text-wrap: balance`: medido, num título de cinco linhas ele
       estreita o bloco em quase 100px e abre um vão à direita. */
}
.lp-hero__sub { max-width: 46rem; margin-left: auto; margin-right: auto; }
.lp-hero__cta { justify-content: center; }
/* No topo a prova não leva o filete: ela vem logo abaixo dos botões, e uma
   linha ali cortaria o conjunto em dois. Centralizada por padrão; com o
   formulário ao lado, a regra do `:has()` a puxa para a esquerda.

   `display: block` aqui era o que sobrava de quando a prova era uma frase
   só. Com a lista, ele anulava o espaçamento entre os itens: os losangos
   colavam no texto anterior. */
.lp-hero .lp-hero__proof {
    justify-content: center;
    border-top: 0;
    padding-top: 0;
    margin: 0 auto;
}
.lp-hero h1 {
    color: #fff;
    margin-bottom: 1.25rem;
    animation: lpFadeUp .8s var(--lp-ease) both;
}
/* Destaque do título: dourado do logotipo, sem gradiente */
.lp-hero h1 .lp-highlight { color: var(--lp-brand-on-dark); }
.lp-hero__sub {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: rgba(255, 255, 255, .85);
    margin-bottom: 2rem;
    animation: lpFadeUp .8s .15s var(--lp-ease) both;
}
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 2.25rem; animation: lpFadeUp .8s .3s var(--lp-ease) both; }
.lp-hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1.75rem;
    max-width: 46rem;
    padding: 1.5rem 0 0;
    margin: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    animation: lpFadeUp .8s .45s var(--lp-ease) both;
}
.lp-hero__proof li {
    display: inline-flex;
    align-items: baseline;
    gap: .6rem;
}
.lp-hero__proof-mark {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin-top: .45rem;
    background: var(--lp-brand-on-dark);
    transform: rotate(45deg);
}

.lp-hero__visual {
    position: relative;
    animation: lpFadeUp .8s .3s var(--lp-ease) both;
    display: none; /* mobile: esconde para o foco ficar no headline */
}
@media (min-width: 960px) {
    .lp-hero__visual { display: block; }
    /* Com imagem lateral o hero volta a duas colunas */
    .lp-hero__inner:has(.lp-hero__visual) { grid-template-columns: 1.05fr .95fr; }
    .lp-hero__inner:has(.lp-hero__visual) .lp-hero__content {
        max-width: 620px;
        margin: 0;
        text-align: left;
    }
    .lp-hero__inner:has(.lp-hero__visual) h1 { margin-left: 0; margin-right: 0; }
    .lp-hero__inner:has(.lp-hero__visual) .lp-hero__sub { margin-left: 0; }
    .lp-hero__inner:has(.lp-hero__visual) .lp-hero__cta,
    .lp-hero__inner:has(.lp-hero__visual) .lp-hero__proof { justify-content: flex-start; }
}
.lp-hero__visual img {
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-lg);
    width: 100%;
}

/* Faixa de serviços no pé do hero: índice do que o escritório faz */
.lp-hero__strip {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 3rem;
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 1rem 2rem;
    animation: lpFadeUp .8s .55s var(--lp-ease) both;
}
.lp-hero__strip::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--lp-gutter);
    right: var(--lp-gutter);
    height: 1px;
    background: rgba(255, 255, 255, .16);
}
.lp-hero__services {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-hero__services li {
    display: inline-flex;
    align-items: center;
    gap: 1.125rem;
    font-size: .9375rem;
}
/* Losango dourado como separador, o mesmo sinal das sobrescrituras */
.lp-hero__services li:not(:last-child)::after {
    content: "";
    width: 5px;
    height: 5px;
    background: var(--lp-brand-on-dark);
    opacity: .6;
    transform: rotate(45deg);
}
.lp-hero__services a,
.lp-hero__services span {
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
}
.lp-hero__services a:hover { color: #fff; }


/* ---------- ABOUT ---------- */
.lp-about__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
/* A imagem da coluna da direita, quando o cliente sobe uma. */
.lp-about__figure {
    margin: 0;
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    aspect-ratio: 4 / 3;
}
.lp-about__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A imagem ao pé de um bloco de texto corrido, quando o cliente sobe uma.
   Proporção fixa pelo mesmo motivo da imagem do institucional. */
.lp-content__figure {
    margin: 2rem 0 0;
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
    aspect-ratio: 4 / 3;
}
.lp-content__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.lp-about__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.lp-stat {
    position: relative;
    padding: 1.5rem 1.25rem 1.375rem;
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    text-align: left;
}
.lp-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.25rem;
    width: 26px;
    height: 2px;
    background: var(--lp-brand);
}
.lp-stat__num {
    display: block;
    font-family: var(--lp-font-display);
    font-size: 2.375rem;
    font-weight: 600;
    color: var(--lp-primary);
    letter-spacing: -.02em;
    line-height: 1;
}
.lp-stat__label {
    color: var(--lp-text-soft);
    font-size: .8125rem;
    line-height: 1.35;
    margin-top: .5rem;
    text-wrap: pretty;
}

/* ---------- SERVICES ---------- */
.lp-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.lp-service-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
    transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), border-color .25s var(--lp-ease);
    display: flex;
    flex-direction: column;
}
.lp-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--lp-shadow);
    border-color: var(--lp-primary-light);
}
.lp-service-card__icon {
    width: 54px; height: 54px;
    border-radius: 4px;
    background: var(--lp-brand-tint);
    border: 1px solid color-mix(in srgb, var(--lp-brand) 40%, transparent);
    color: var(--lp-brand-on-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    line-height: 1;
}
.lp-service-card h2,
.lp-service-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.lp-service-card h2 a,
.lp-service-card h3 a { color: var(--lp-text); }
.lp-service-card h2 a:hover,
.lp-service-card h3 a:hover { color: var(--lp-primary); }
.lp-service-card p { flex: 1; margin-bottom: 1rem; }
.lp-service-card__link {
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.lp-service-card__link::after { content: '';
    width: 1em; height: 1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .2s var(--lp-ease); }
.lp-service-card__link:hover::after { transform: translateX(4px); }

/* ---------- TESTIMONIALS ---------- */
.lp-testimonials__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.lp-testimonials__track::-webkit-scrollbar { display: none; }
.lp-testimonial {
    scroll-snap-align: start;
    background: #fff;
    padding: 2.25rem;
    border-radius: var(--lp-radius);
    border: 1px solid var(--lp-border);
}
.lp-testimonial__stars { color: #FBBF24; font-size: 1.125rem; margin-bottom: 1rem; letter-spacing: 2px; }
.lp-testimonial__text { font-size: 1.05rem; color: var(--lp-text); margin-bottom: 1.5rem; }
.lp-testimonial__person { display: flex; align-items: center; gap: .875rem; }
.lp-testimonial__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--lp-primary);
    color: var(--lp-brand-on-dark);
    font-family: var(--lp-font-display);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
}
.lp-testimonial__name { font-weight: 600; }
.lp-testimonial__role { color: var(--lp-text-muted); font-size: .875rem; }

.lp-testimonials__nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1.5rem; }
.lp-testimonials__nav button {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--lp-border);
    background: #fff;
    color: var(--lp-text);
    transition: all .2s var(--lp-ease);
}
.lp-testimonials__nav button:hover { background: var(--lp-primary); color: var(--lp-on-primary); border-color: var(--lp-primary); }

/* ---------- CLIENTS MARQUEE ---------- */
.lp-clients { padding: 4rem 0; background: var(--lp-bg-alt); border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); }
.lp-clients__title { text-align: center; color: var(--lp-text-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 2rem; font-weight: 600; }
.lp-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lp-marquee__track {
    display: flex;
    gap: 4rem;
    animation: lpMarquee 35s linear infinite;
    width: max-content;
}
.lp-marquee__item {
    flex: 0 0 auto;
    height: 48px;
    display: inline-flex;
    align-items: center;
    color: var(--lp-text-muted);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .04em;
    opacity: .65;
    transition: opacity .2s var(--lp-ease);
}
.lp-marquee__item:hover { opacity: 1; }
.lp-marquee__item img { max-height: 48px; width: auto; }

/* ---------- carteira em grade ---------- */

/* A alternativa à faixa, para logo quadrada e para carteira curta. Aqui a
   logo é limitada pela LARGURA do cartão, então um quadrado continua
   legível — e cada marca ganha a linha que diz o que ela faz, que é o que
   transforma um mural de logos em prova de que a casa atende aquele ramo. */
.lp-clients__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.lp-client-card {
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    padding: 1.5rem 1.25rem;
    text-align: center;
    transition: transform .3s var(--lp-ease), box-shadow .3s var(--lp-ease);
}
.lp-client-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
/* A moldura é BRANCA e não herda o fundo do cartão: as logos chegam com
   fundos próprios (uma delas é amarela de ponta a ponta), e sobre creme a
   que tem fundo branco viraria um retângulo recortado. */
.lp-client-card__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    margin-bottom: 1rem;
    border-radius: var(--lp-radius);
    background: #fff;
    overflow: hidden;
}
.lp-client-card__mark img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.lp-client-card__name {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--lp-text);
    line-height: 1.3;
}
.lp-client-card__text {
    margin: .35rem 0 0;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--lp-text-soft);
}

/* ---------- CONTACT ---------- */
.lp-contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}
.lp-contact__info p { margin-bottom: 1.5rem; }
.lp-contact__channels { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.lp-contact__channel {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    transition: border-color .2s var(--lp-ease), transform .2s var(--lp-ease);
}
.lp-contact__channel:hover { border-color: var(--lp-primary); transform: translateX(4px); }
.lp-contact__channel-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-contact__channel-icon svg { width: 17px; height: 17px; }
.lp-contact__channel--whatsapp .lp-contact__channel-icon { background: var(--lp-accent-light); color: var(--lp-accent); }
.lp-contact__channel-label { font-size: .72rem; color: var(--lp-text-muted); text-transform: uppercase; letter-spacing: .08em; }
.lp-contact__channel-value { font-size: .92rem; font-weight: 600; color: var(--lp-text); }
.lp-contact-page__map-section {
    padding-bottom: 0;
}
.lp-contact-page__map {
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
    border: 1px solid var(--lp-border);
    box-shadow: var(--lp-shadow);
    background: var(--lp-bg-alt);
}
.lp-contact-page__map iframe {
    display: block;
    width: 100% !important;
    height: clamp(320px, 42vw, 480px) !important;
    border: 0 !important;
}
.lp-contact-page #contato {
    padding-top: clamp(3rem, 6vw, 4.5rem);
}

.lp-form {
    background: #fff;
    padding: 2.25rem;
    border-radius: var(--lp-radius-lg);
    border: 1px solid var(--lp-border);
    box-shadow: var(--lp-shadow);
}
.lp-form__field { margin-bottom: 1.125rem; }
.lp-form__field label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--lp-text);
    margin-bottom: .375rem;
}
.lp-form__field input,
.lp-form__field textarea {
    width: 100%;
    padding: .875rem 1rem;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    background: var(--lp-bg-alt);
    font-size: 1rem;
    font-family: inherit;
    color: var(--lp-text);
    transition: border-color .2s var(--lp-ease), background .2s var(--lp-ease), box-shadow .2s var(--lp-ease);
}
.lp-form__field input:focus,
.lp-form__field textarea:focus {
    outline: 0;
    border-color: var(--lp-primary);
    background: #fff;
    box-shadow: 0 0 0 4px var(--lp-primary-light);
}
.lp-form__field textarea { min-height: 120px; resize: vertical; }
/* A altura do widget reservada: ele entra depois, e sem a reserva empurrava
   o formulário — e o título do topo junto. São 73px e não os 65px do iframe:
   o widget é inline e ganha o espaço da linha de texto abaixo dele. Medido no
   site da Záira em produção, 02/10/2026. */
.lp-form__captcha { margin-bottom: 1.125rem; min-height: 73px; }
.lp-form .lp-btn { width: 100%; justify-content: center; }
.lp-form__feedback { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--lp-radius-sm); font-size: .9rem; display: none; }
.lp-form__feedback.is-success { display: block; background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.lp-form__feedback.is-error { display: block; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* ---------- BLOG (HOME) ---------- */
.lp-blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}
.lp-post-card {
    background: #fff;
    border-radius: var(--lp-radius);
    overflow: hidden;
    border: 1px solid var(--lp-border);
    transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease);
    display: flex;
    flex-direction: column;
}
.lp-post-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow); }
.lp-post-card__thumb {
    aspect-ratio: 16/9;
    /* Segue a borda do cliente: um cinza-azulado fixo aqui virava a única
       mancha fria numa identidade quente, e aparecia justo onde ainda não
       há foto. */
    background: var(--lp-border);
    overflow: hidden;
}
.lp-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--lp-ease); }
.lp-post-card:hover .lp-post-card__thumb img { transform: scale(1.05); }
.lp-post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.lp-post-card__meta { font-size: .8125rem; color: var(--lp-text-muted); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.lp-post-card__title { font-size: 1.125rem; margin-bottom: .5rem; }
.lp-post-card__title a { color: var(--lp-text); }
.lp-post-card__title a:hover { color: var(--lp-primary); }
.lp-post-card__excerpt { color: var(--lp-text-soft); font-size: .95rem; flex: 1; }
.lp-blog__cta { text-align: center; }

/* ---------- BLOG (ARCHIVE) ---------- */
.lp-archive { padding: calc(var(--lp-header-h) + 4rem) 0 5rem; }
.lp-archive__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.lp-archive__title { margin-bottom: 1rem; }
.lp-archive__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
    padding: 1.25rem;
    background: var(--lp-bg-alt);
    border-radius: var(--lp-radius);
}
.lp-archive__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.lp-archive__cats a {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-size: .875rem;
    font-weight: 500;
}
.lp-archive__cats a:hover,
.lp-archive__cats a.is-active { background: var(--lp-primary); border-color: var(--lp-primary); color: var(--lp-on-primary); }
.lp-search-form { display: flex; gap: .5rem; }
.lp-search-form input {
    padding: .65rem 1rem;
    border: 1.5px solid var(--lp-border);
    border-radius: var(--lp-radius-sm);
    background: #fff;
    font-size: .9rem;
    min-width: 220px;
}
.lp-search-form input:focus { outline: 0; border-color: var(--lp-primary); }
.lp-search-form button { padding: .65rem 1.1rem; border-radius: var(--lp-radius-sm); border: 0; background: var(--lp-primary); color: var(--lp-on-primary); font-weight: 600; }

.lp-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap; }
.lp-pagination a, .lp-pagination span {
    padding: .625rem 1rem;
    border-radius: var(--lp-radius-sm);
    background: #fff;
    border: 1px solid var(--lp-border);
    color: var(--lp-text-soft);
    font-weight: 500;
    min-width: 44px;
    text-align: center;
}
.lp-pagination .current { background: var(--lp-primary); border-color: var(--lp-primary); color: var(--lp-on-primary); }
.lp-pagination a:hover { border-color: var(--lp-primary); color: var(--lp-primary); }

/* Busca sem resultado. O bloco nasce escondido e só o JS o revela — a lista
   vinda do servidor nunca está vazia, porque a página só existe com matéria. */
.lp-blog__empty { text-align: center; padding: 3rem 0; }
.lp-blog__empty h3 { margin-bottom: .5rem; }
.lp-blog__empty p { color: var(--lp-muted); margin-bottom: 1.5rem; }

/* "Continue lendo": no tema isto era style inline no template. */
.lp-single__related { max-width: 1000px; margin: 3rem auto 0; }
.lp-single__related h2 { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; }

/* ---------- SINGLE POST ---------- */
.lp-single { padding: calc(var(--lp-header-h) + 3rem) 0 4rem; }
.lp-service-single { padding-top: 0; }
.lp-single__head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.lp-single__cat {
    display: inline-block;
    padding: .375rem 1rem;
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.lp-single__meta { color: var(--lp-text-muted); font-size: .9rem; }
/* Imagem destacada de post, página e serviço. A medida e o arredondamento
   ficam na figura, e não num seletor preso ao nome do tamanho da imagem —
   ver o comentário em .lp-single__thumb img, mais abaixo. */
.lp-single__thumb {
    max-width: 600px;
    margin: 0 auto 30px;
    border-radius: 20px;
    overflow: hidden;
}
.lp-single__thumb img {
    width: 100%;
    border-radius: inherit;
}
/* Legenda da imagem destacada. Sem regra própria ela saía com o corpo do
   texto, parecendo um parágrafo perdido debaixo da foto. */
.lp-single__thumb figcaption {
    margin-top: .75rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--lp-text-muted);
    text-align: center;
}
.lp-single__content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.8;
}
.lp-single__content h2 { margin: 2.5rem 0 1rem; font-size: 1.75rem; }
.lp-single__content h3 { margin: 2rem 0 .75rem; font-size: 1.375rem; }
.lp-single__content p { margin-bottom: 1.25rem; color: var(--lp-text); }
.lp-single__content img { border-radius: var(--lp-radius); margin: 1.5rem 0; }
.lp-single__content blockquote {
    border-left: 4px solid var(--lp-primary);
    padding: .5rem 0 .5rem 1.5rem;
    margin: 1.75rem 0;
    color: var(--lp-text-soft);
    font-style: italic;
    font-size: 1.125rem;
}
.lp-single__content ul, .lp-single__content ol { margin-bottom: 1.25rem; }
.lp-single__content li { margin-bottom: .5rem; }
.lp-single__content a { font-weight: 600; border-bottom: 1px solid currentColor; }
.lp-service-hero {
    position: relative;
    padding: calc(var(--lp-header-h) + 3rem) 0 4rem;
    background: linear-gradient(148deg, var(--lp-primary-deeper) 0%, var(--lp-primary) 60%, var(--lp-primary-soft) 100%);
    color: var(--lp-on-primary);
    margin-bottom: 3rem;
}
.lp-service-hero > * { position: relative; z-index: 1; }
.lp-service-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.lp-service-hero__content { max-width: 760px; }
.lp-service-hero__cat {
    display: inline-flex;
    width: fit-content;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.lp-service-hero__cat:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.lp-service-hero__icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: var(--lp-radius);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 2rem;
    margin-bottom: 1rem;
}
.lp-service-hero h1 {
    color: #fff;
    max-width: 860px;
    margin-bottom: 1rem;
}
.lp-service-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.12rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.lp-service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}
.lp-service-hero__panel {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--lp-radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}
.lp-service-hero__panel h2 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.lp-service-hero__panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lp-service-hero__panel li {
    position: relative;
    padding-left: 1.4rem;
    color: rgba(255, 255, 255, .82);
    margin-bottom: .85rem;
}
.lp-service-hero__panel li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-brand-on-dark);
}
.lp-services-archive { padding-top: 0; }
/* Respiro branco depois da última fileira de cards: sem ele o fundo cinza de
   "Segmentos atendidos" começa colado na base dos cards. */
.lp-services-archive__list { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.lp-services-archive__hero {
    position: relative;
    padding: calc(var(--lp-header-h) + 3rem) 0 3rem;
    background: linear-gradient(148deg, var(--lp-primary-deeper) 0%, var(--lp-primary) 60%, var(--lp-primary-soft) 100%);
    color: var(--lp-on-primary);
    margin-bottom: 3rem;
}
.lp-services-archive__hero > * { position: relative; z-index: 1; }
.lp-services-archive__hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}
.lp-services-archive__hero h1 { color: #fff; }
.lp-services-archive__hero h1 {
    max-width: 900px;
    margin-bottom: 1rem;
}
.lp-services-archive__hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, .8);
    font-size: 1.08rem;
}
.lp-related-services {
    max-width: 1100px;
    margin: 3rem auto 0;
}
.lp-related-services > h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.lp-single__cta {
    position: relative;
    max-width: 760px;
    margin: 2.5rem auto;
    padding: 2.5rem 2.25rem 2.25rem;
    background: var(--lp-primary);
    color: var(--lp-on-primary);
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
}
.lp-single__cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--lp-brand);
}
.lp-single__cta h2 { color: #fff; margin-bottom: .5rem; }
.lp-single__cta p { color: rgba(255, 255, 255, .9); margin-bottom: 1.5rem; }

/* ---------- ABOUT PAGE ---------- */
.lp-page-hero {
    position: relative;
    padding: calc(var(--lp-header-h) + 3rem) 0 4rem;
    background: linear-gradient(148deg, var(--lp-primary-deeper) 0%, var(--lp-primary) 60%, var(--lp-primary-soft) 100%);
    color: var(--lp-on-primary);
}
.lp-page-hero > * { position: relative; z-index: 1; }
.lp-page-hero::after,
.lp-service-hero::after,
.lp-services-archive__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, .045) 0 1px,
        transparent 1px 34px
    );
}
.lp-page-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.lp-page-hero__content {
    max-width: 760px;
}
.lp-page-hero--no-media .lp-page-hero__content {
    max-width: 860px;
}
.lp-page-hero h1 {
    color: #fff;
    margin-bottom: 1rem;
}
.lp-page-hero p {
    color: rgba(255, 255, 255, .84);
    font-size: 1.1rem;
    max-width: 720px;
}
/*
 * Os botões da chamada final.
 *
 * Classe própria, e não a do banner interno: lá o alinhamento à esquerda
 * acompanha o texto, aqui o bloco inteiro é centralizado. Reaproveitar
 * `lp-page-hero__actions` deixava o botão encostado na margem esquerda
 * embaixo de um título centralizado.
 */
.lp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
    margin-top: 1.75rem;
}

.lp-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.75rem;
}
.lp-page-hero__media {
    margin: 0;
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
    box-shadow: var(--lp-shadow-lg);
    aspect-ratio: 4 / 3;
}
.lp-page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-about-page__content {
    max-width: 820px;
    margin: 0 auto;
}
.lp-about-page__figure {
    margin: 2rem 0 0;
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
    box-shadow: var(--lp-shadow);
}
.lp-about-page__figure img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}
.lp-mvv-grid,
.lp-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.lp-mvv-card,
.lp-team-card {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    overflow: hidden;
    transition: transform .25s var(--lp-ease), box-shadow .25s var(--lp-ease), border-color .25s var(--lp-ease);
}
.lp-mvv-card:hover,
.lp-team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lp-shadow);
    border-color: var(--lp-primary-light);
}
.lp-mvv-card {
    padding: 2rem;
}
.lp-mvv-card__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--lp-brand-tint);
    border: 1px solid color-mix(in srgb, var(--lp-brand) 40%, transparent);
    color: var(--lp-brand-on-light);
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}
.lp-mvv-card h3 {
    font-size: 1.25rem;
    margin-bottom: .65rem;
}
.lp-mvv-card__text p:last-child {
    margin-bottom: 0;
}
.lp-about-page__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto;
}
.lp-practice-areas {
    overflow: hidden;
}
.lp-practice-carousel {
    overflow: hidden;
    /* Esmaecimento mais curto que o da faixa de clientes: aqui a régua tem a
       largura do container, então uma borrada larga comeria o cartão inteiro. */
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.lp-practice-carousel__track {
    display: flex;
    width: max-content;
    /* Sem recuo lateral: quem dá a margem agora é o .lp-container em volta.
       O vertical existe para não cortar a sombra dos cartões. */
    padding: .5rem 0 1rem;
    gap: 1rem;
    animation: lpPracticeScroll var(--lp-practice-duration, 34s) linear infinite;
}
/* O JS mede a largura exata de um grupo de cartões e grava as duas variáveis.
   O -50% é o fallback de quando o script não roda: só fecha o ciclo direito
   porque o grupo é duplicado, mas mantém a faixa em movimento. */
@keyframes lpPracticeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--lp-practice-distance, 50%) * -1)); }
}
.lp-practice-carousel:hover .lp-practice-carousel__track,
.lp-practice-carousel:focus-within .lp-practice-carousel__track {
    animation-play-state: paused;
}
/* Variante 'grid' dos segmentos: cartões parados.

   `auto-fit` em vez de três colunas fixas porque o número de segmentos é dado
   do cliente — com três eles ocupam a linha, com quatro a grade se ajusta, e
   no celular vira uma coluna sem media query nenhuma. O cartão é o mesmo da
   faixa; o `flex-basis` dele não participa aqui, quem manda é a célula. */
.lp-practice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    padding: .5rem 0 1rem;
}
.lp-practice-card {
    flex: 0 0 220px;
    min-height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .85rem;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-sm);
}
.lp-practice-card__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--lp-radius-sm);
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    font-size: 1.55rem;
}
.lp-practice-card h3 {
    font-size: 1rem;
    margin: 0;
    line-height: 1.25;
}
.lp-team-card__photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: var(--lp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.lp-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lp-team-card__photo span {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--lp-primary);
    color: var(--lp-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}
.lp-team-card__body {
    padding: 1.5rem;
}
.lp-team-card h3 {
    font-size: 1.2rem;
    margin-bottom: .35rem;
}
.lp-team-card__role {
    color: var(--lp-primary);
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .75rem;
}
.lp-team-card__bio p {
    font-size: .95rem;
    margin-bottom: 1rem;
}
.lp-team-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .9rem;
    font-weight: 700;
}
.lp-about-page__cta-section {
    padding-top: 0;
}
.lp-about-page__cta {
    margin-bottom: 0;
}

/* ---------- FAQ (single service) ---------- */
.lp-service-faq {
    max-width: 760px;
    margin: 3rem auto 0;
}
.lp-service-faq > h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.lp-faq {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}
.lp-faq__item {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    background: var(--lp-bg);
    transition: border-color .3s var(--lp-ease), box-shadow .3s var(--lp-ease);
}
.lp-faq__item.is-open {
    border-color: var(--lp-primary);
    box-shadow: var(--lp-shadow);
}
.lp-faq__heading {
    margin: 0;
    font-size: inherit;
}
.lp-faq__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--lp-text);
    transition: color .25s var(--lp-ease);
}
.lp-faq__trigger:hover { color: var(--lp-primary); }
.lp-faq__trigger:focus-visible {
    outline: 2px solid var(--lp-primary);
    outline-offset: -2px;
    border-radius: var(--lp-radius);
}
.lp-faq__icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lp-primary-light);
    color: var(--lp-primary);
    transition: transform .35s var(--lp-ease), background .25s var(--lp-ease);
}
.lp-faq__item.is-open .lp-faq__icon {
    transform: rotate(-180deg);
    background: var(--lp-primary);
    color: var(--lp-on-primary);
}
/*
 * O colapso do FAQ só existe quando há JavaScript para desfazê-lo.
 *
 * A resposta está sempre no documento — o que muda é a altura da linha do
 * grid. Sem o guard, um erro de script transformaria cada pergunta num título
 * mudo, e o visitante veria uma lista de perguntas sem nenhuma resposta.
 */
@media (scripting: enabled) {
    .lp-faq__panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .35s var(--lp-ease);
    }

    .lp-faq__answer { opacity: 0; }
}
.lp-faq__item.is-open .lp-faq__panel {
    grid-template-rows: 1fr;
}
.lp-faq__answer {
    overflow: hidden;
    min-height: 0;
    transition: opacity .25s var(--lp-ease);
}
.lp-faq__item.is-open .lp-faq__answer {
    opacity: 1;
}
.lp-faq__answer > * {
    padding: 0 1.375rem;
}
.lp-faq__answer > :first-child { padding-top: .25rem; }
.lp-faq__answer > :last-child { padding-bottom: 1.25rem; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .lp-faq__panel,
    .lp-faq__answer,
    .lp-faq__icon { transition: none; }
    /* Sem animação a faixa vira uma régua rolável: sem a máscara, senão os
       cartões das pontas ficariam apagados e sem jeito de alcançar. */
    .lp-practice-carousel__track { animation: none; }
    .lp-practice-carousel {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* ---------- FOOTER ---------- */
.lp-footer {
    position: relative;
    background: var(--lp-bg-dark);
    color: rgba(255, 255, 255, .75);
    padding: 4.5rem 0 1.5rem;
    /* Fio dourado fechando a página, o mesmo recurso do bloco de CTA */
    border-top: 3px solid var(--lp-brand);
}
.lp-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
.lp-footer__brand p { color: rgba(255, 255, 255, .65); max-width: 360px; margin-top: 1.25rem; }
.lp-footer__wa { margin-top: .25rem; }
.lp-footer__col h2 {
    color: #fff;
    font-family: var(--lp-font-display);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 1.25rem;
    padding-bottom: .625rem;
    position: relative;
}
/* Fio dourado curto sob o título, no lugar do losango — o losango já marca as
   sobrescrituras do conteúdo e repeti-lo aqui viraria ruído. */
.lp-footer__col h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 2px;
    background: var(--lp-brand);
}
.lp-footer__col ul { list-style: none; padding: 0; margin: 0; }
.lp-footer__col li { margin-bottom: .625rem; }
.lp-footer__col a { color: rgba(255, 255, 255, .7); font-size: .95rem; }
.lp-footer__col a:hover { color: var(--lp-brand-on-dark); }

/* Bloco de endereço/telefone/e-mail/horário */
.lp-footer__nap li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin-bottom: .875rem;
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .7);
}
.lp-footer__nap-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .15rem;
    color: var(--lp-brand);
}
.lp-footer__nap-icon svg { width: 100%; height: 100%; display: block; }

.lp-footer__social { display: flex; gap: .75rem; margin-top: 1.5rem; }
.lp-footer__social a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background .2s var(--lp-ease), transform .2s var(--lp-ease);
}
/* Dourado no hover: a primária é o próprio marinho do rodapé */
.lp-footer__social a:hover { background: var(--lp-brand); transform: translateY(-3px); color: var(--lp-primary); }
.lp-footer__social svg { width: 18px; height: 18px; }
.lp-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: center;
    text-align: center;
    font-size: .875rem;
    color: rgba(255, 255, 255, .55);
}
.lp-footer__legal {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
/* .42 dava 4,05:1 sobre o marinho do rodapé — abaixo do mínimo de 4,5:1 da
   WCAG AA. O CRC e o CNPJ são justamente a informação que precisa ser lida
   por quem está conferindo se o escritório é registrado. */
.lp-footer__cnpj,
.lp-footer__registry { color: rgba(255, 255, 255, .62); }

/* O link legal não tinha cor própria e caía no `a { color: var(--lp-primary) }`
   global — o marinho da marca, sobre o marinho do rodapé: 1,09:1, praticamente
   invisível. Só apareceu quando o cliente preencheu a política de privacidade
   e o link passou a existir. Mesma cor dos demais links do rodapé. */
/* Convite de avaliação no rodapé. Discreto por escolha: uma linha, não um
   segundo botão disputando atenção com o WhatsApp. As estrelas usam a cor da
   marca, que é o que faz a linha ser notada sem gritar. */
.lp-footer__review {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color .2s var(--lp-ease);
}
.lp-footer__review:hover { color: #fff; }
.lp-footer__review-stars { display: inline-flex; gap: .1rem; color: var(--lp-brand); }
.lp-footer__review-stars svg { width: 14px; height: 14px; }
.lp-footer__review:hover .lp-footer__review-stars { color: var(--lp-brand-on-dark); }

.lp-footer__legal a { color: rgba(255, 255, 255, .7); }
.lp-footer__legal a:hover { color: var(--lp-brand-on-dark); }
.lp-footer__credit-link {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    transition: color .25s ease;
}
.lp-footer__credit-link:hover { color: #fff; }
.lp-cnw-mark { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; }
.lp-cnw-mark svg { width: 100%; height: 100%; display: block; }
.lp-cnw-mark__tilt {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(-10deg);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.lp-footer__credit-link:hover .lp-cnw-mark__tilt { transform: rotate(0deg); }
.lp-cnw-text strong { font-weight: 700; }

/* ---------- ANIMATIONS ---------- */
@keyframes lpFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes lpPulse {
    0%, 100% { box-shadow: 0 12px 30px var(--lp-accent-shadow-strong), 0 0 0 0 var(--lp-accent-glow); }
    50%      { box-shadow: 0 12px 30px var(--lp-accent-shadow-strong), 0 0 0 14px transparent; }
}
@keyframes lpMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 720px) {
    .lp-services__grid { grid-template-columns: repeat(2, 1fr); }
    .lp-blog__grid { grid-template-columns: repeat(2, 1fr); }
    .lp-testimonials__track { grid-auto-columns: calc(50% - .75rem); }
    /* Tablet: marca ocupa a linha inteira e as três listas se dividem embaixo */
    .lp-footer__grid { grid-template-columns: repeat(3, 1fr); }
    .lp-footer__brand { grid-column: 1 / -1; }
    .lp-mvv-grid,
    .lp-team-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-practice-card { flex-basis: 250px; }
    .lp-services-archive__hero-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .lp-services-archive__hero .lp-btn { flex-shrink: 0; }
}
@media (min-width: 960px) {
    .lp-nav { display: block; }
    .lp-header__cta { display: inline-flex; }
    .lp-burger { display: none; }

    /* ---------- Submenu do topo (Aparência > Menus, um nível) ---------- */
    .lp-nav li { position: relative; }
    /* Seta do item com filhos. O ::after do link já é o sublinhado. */
    .lp-nav .menu-item-has-children > a { padding-right: 15px; }
    .lp-nav .menu-item-has-children > a::before {
        content: '';
        position: absolute;
        right: 0; top: 50%;
        width: 6px; height: 6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        opacity: .65;
    }
    /* Ponte invisível até o painel, para o hover não morrer no vão. */
    .lp-nav .menu-item-has-children::after {
        content: '';
        position: absolute;
        left: 0; right: 0; top: 100%;
        height: 16px;
    }
    .lp-nav .sub-menu {
        position: absolute;
        top: calc(100% + 16px);
        left: -1.25rem;
        z-index: 10;
        display: block;
        min-width: 250px;
        padding: .5rem 0;
        background: #fff;
        border: 1px solid var(--lp-border);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(13, 27, 42, .16);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity .2s var(--lp-ease), transform .2s var(--lp-ease), visibility .2s;
    }
    .lp-nav li:hover > .sub-menu,
    .lp-nav li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    /* Painel é sempre branco: o link ignora o estado claro/escuro do topo. */
    .lp-nav .sub-menu a,
    .lp-header.is-scrolled .lp-nav .sub-menu a,
    .lp-header.is-inner .lp-nav .sub-menu a {
        display: block;
        padding: .6rem 1.25rem;
        color: var(--lp-text-soft);
        font-size: .925rem;
        line-height: 1.35;
    }
    .lp-nav .sub-menu a:hover,
    .lp-nav .sub-menu a.is-active,
    .lp-header.is-scrolled .lp-nav .sub-menu a:hover,
    .lp-header.is-inner .lp-nav .sub-menu a:hover { color: var(--lp-primary); background: var(--lp-bg-alt); }
    .lp-nav .sub-menu a::after { display: none; }
    /* Duas colunas somente com imagem lateral (regra em .lp-hero__visual) */
    .lp-hero__inner { gap: 4rem; }
    .lp-about__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .lp-services__grid { grid-template-columns: repeat(3, 1fr); }
    .lp-page-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 4rem; }
    .lp-page-hero--no-media .lp-page-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .lp-mvv-grid,
    .lp-team-grid { grid-template-columns: repeat(3, 1fr); }
    .lp-practice-card { flex-basis: 280px; }
    .lp-testimonials__track { grid-auto-columns: calc(33.333% - 1rem); }
    .lp-blog__grid { grid-template-columns: repeat(3, 1fr); }
    .lp-contact__grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
    .lp-service-hero__inner { grid-template-columns: minmax(0, 1fr) 360px; gap: 4rem; }
    /* Desktop: marca + três listas na mesma linha. Contato é mais largo porque
       carrega o endereço completo. */
    .lp-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3rem 2.5rem; }
    .lp-footer__brand { grid-column: auto; }
    .lp-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
    .lp-footer__legal { flex-direction: row; gap: 1.25rem; }
}
@media (min-width: 1100px) {
    :root { --lp-gutter: 2rem; }
}


/* ==========================================================================
   Trilha de navegação
   O BreadcrumbList já existia nos dados estruturados; isto é a trilha visível
   que aquele schema descreve. Duas situações: dentro dos heroes marinhos, onde
   herda o texto claro, e abrindo páginas de fundo branco.
   ========================================================================== */
.lp-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--lp-text-muted);
}
.lp-crumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.lp-crumbs a:hover,
.lp-crumbs a:focus-visible { border-bottom-color: currentColor; }
.lp-crumbs [aria-current="page"] { color: var(--lp-text); font-weight: 500; }
.lp-crumbs__sep { opacity: .55; }

/* Yoast monta a trilha como texto corrido com <span> entre os links. */
.lp-crumbs > span { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Abrindo uma página clara: respiro abaixo do header fixo, respiro acima do H1. */
.lp-crumbs:not(.lp-crumbs--inline) { margin-bottom: 1.5rem; }

/* A trilha é o primeiro filho de <main> e o cabeçalho é fixo (76px): sem
   reservar essa altura, ela nasce ATRÁS do topo e não se vê. Nas páginas com
   hero escuro quem reserva é o hero, e a trilha fica escondida — comportamento
   antigo, que muda de layout e precisa ser conferido no olho.
   Aqui a reserva passa para a trilha, e a seção seguinte devolve o espaço. */
.lp-crumbs:has(+ .lp-archive),
.lp-crumbs:has(+ .lp-single) { padding-top: calc(var(--lp-header-h) + 1.5rem); }
.lp-crumbs + .lp-archive,
.lp-crumbs + .lp-single { padding-top: 1rem; }

/* Dentro dos heroes marinhos. */
.lp-crumbs--inline {
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, .72);
}
.lp-crumbs--inline [aria-current="page"] { color: #fff; }

/* ==========================================================================
   Avaliações no Google (página de Contato)
   Aparece só quando o perfil está cadastrado no Customizer.
   ========================================================================== */
.lp-reviews__inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.lp-reviews__stars {
    display: flex;
    justify-content: center;
    gap: .25rem;
    margin-bottom: 1rem;
    color: var(--lp-brand);
}
.lp-reviews__stars svg { width: 22px; height: 22px; }
.lp-reviews h2 { margin-bottom: .75rem; }
.lp-reviews p { margin-bottom: 1.75rem; }
.lp-reviews__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
.lp-reviews__actions .lp-btn svg { width: 18px; height: 18px; }
/* Sobre a faixa cinza, o --lp-border padrão do --ghost fica em 1,14:1 contra o
   fundo e o botão deixa de parecer um botão. Este marinho a 55% dá 3,48:1, o
   mínimo que a WCAG pede para contorno de elemento de interface. O
   preenchimento branco reforça a separação sem competir com o primário. */
.lp-reviews__actions .lp-btn--ghost {
    background: #fff;
    border-color: rgba(13, 27, 42, .55);
}
.lp-reviews__actions .lp-btn--ghost:hover {
    background: #fff;
    border-color: var(--lp-primary);
    color: var(--lp-primary);
}

/* Ícone do Google no rodapé: o círculo dos outros ícones já dá o contraste. */
.lp-footer__social a svg { width: 20px; height: 20px; }


/* Honeypot do formulário: precisa existir para o robô, sumir para a pessoa.
   display:none seria pulado por parte dos bots, então tiramos da tela. */
.lp-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* O estado do envio usa .lp-form__feedback com is-success/is-error, que o
   tema já estilizava. Havia aqui um .lp-form__status paralelo — nome novo
   para o que já existia, e por isso sem estilo nenhum na tela. */

.lp-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Substitui o Complianz, que custava até 864 ms de bloqueio de renderização.
   Fica fora do fluxo e só aparece depois do primeiro paint, então não entra
   na medição do LCP. */
.lp-consent {
    position: fixed;
    left: var(--lp-gutter);
    right: var(--lp-gutter);
    bottom: var(--lp-gutter);
    z-index: 120;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-lg);
}

/* O atributo hidden só esconde porque a folha do navegador diz display:none —
   e qualquer display explícito vence isso. Sem esta linha o banner aparecia
   para todo mundo, sempre, e não sumia nem depois de clicar. */
.lp-consent[hidden] { display: none; }

.lp-consent p { margin: 0; font-size: .9rem; color: var(--lp-text-soft); }

.lp-consent a { color: var(--lp-primary); font-weight: 600; }

.lp-consent__actions { display: flex; gap: .75rem; }

.lp-consent__actions .lp-btn { flex: 1; justify-content: center; padding: .7rem 1rem; font-size: .92rem; }

@media (min-width: 720px) {
    .lp-consent { flex-direction: row; align-items: center; justify-content: space-between; }
    .lp-consent__actions { flex: 0 0 auto; }
}

/* Linha de consentimento do formulário: caixa e rótulo lado a lado, com a
   caixa alinhada à primeira linha do texto e não ao centro do parágrafo. */
.lp-form__consent { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: 1.125rem; }

.lp-form__consent input { margin-top: .2rem; flex: 0 0 auto; width: 1rem; height: 1rem; accent-color: var(--lp-primary); }

.lp-form__consent label { font-size: .85rem; line-height: 1.5; color: var(--lp-text-soft); }

/* Chapéu sobre fundo escuro (hero). Como classe, e não style inline, o token
   da paleta continua mandando na cor. */
.lp-eyebrow--on-dark {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    padding: .35rem .85rem;
    border-radius: 999px;
}


/*
 * A revelação por rolagem só existe quando há JavaScript.
 *
 * `[data-lp-reveal]` nasce transparente e o observer devolve a opacidade. Sem
 * script — ou com ele quebrado — o conteúdo ficaria invisível para sempre, e
 * o buscador leria uma página em branco. A consulta abaixo só aplica o efeito
 * onde há script para desfazê-lo.
 */
@media (scripting: enabled) {
    [data-lp-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--lp-ease), transform .6s var(--lp-ease); }
    [data-lp-reveal].is-visible { opacity: 1; transform: none; }
}

/*
 * O depoimento é <figure>/<blockquote>, que é o markup certo para uma citação
 * com autoria. Os dois trazem margem do agente do navegador, e sem zerar aqui
 * o texto quebra a cada duas palavras dentro do cartão.
 */
figure.lp-testimonial { margin: 0; }
.lp-testimonial blockquote,
.lp-testimonial figcaption { margin: 0; }

/* O nome de quem assina a matéria. */
.lp-single__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* =========================================================
   CAMADA DE VENDA — o que só existe neste modelo
   ========================================================= */

/* ---------- TOPO COM FORMULÁRIO ---------- */

/* O topo com formulário não precisa de 100vh: a dobra tem de mostrar a
   promessa E o primeiro campo, e uma tela inteira de altura empurra o botão
   de enviar para fora no notebook. */
.lp-hero--form { min-height: 0; padding-bottom: 3rem; }

/* O fio da marca no topo do cartão liga o formulário à identidade sem colorir
   a caixa inteira, que roubaria a atenção do botão.

   Ele é o PRIMEIRO plano de fundo do próprio cartão, e não um ::before. O
   pseudo-elemento tinha de repetir o arredondamento da caixa, e um raio de
   16px numa faixa de 4px de altura o navegador encolhe na proporção da
   caixa: as pontas viravam duas curvas atarracadas que não acompanhavam o
   canto do cartão. Como fundo, quem recorta a faixa é o `border-radius` do
   próprio cartão — sempre na curva certa, qualquer que seja o raio do
   cliente. */
.lp-hero__form {
    position: relative;
    background:
        linear-gradient(90deg, var(--lp-brand), color-mix(in srgb, var(--lp-brand) 40%, transparent)) top / 100% 4px no-repeat,
        var(--lp-bg);
    color: var(--lp-text);
    border-radius: var(--lp-radius-lg);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .28);
    animation: lpFadeUp .8s .25s var(--lp-ease) both;
}
.lp-hero__form-title {
    font-size: 1.35rem;
    margin-bottom: .35rem;
    color: var(--lp-text);
}
.lp-hero__form-text {
    margin: 0 0 1.25rem;
    color: var(--lp-text-muted);
    font-size: .95rem;
}

/* Formulário curto: rótulo miúdo, campo mais baixo e sem o espaço de
   respiro do formulário longo da página de contato. */
.lp-form--compact .lp-form__field { margin-bottom: .75rem; }
.lp-form--compact .lp-form__field label { font-size: .8rem; }
.lp-form--compact input { padding: .7rem .85rem; }
.lp-form--compact .lp-form__consent { margin: .35rem 0 1rem; font-size: .78rem; }

.lp-btn--block { width: 100%; justify-content: center; }

@media (min-width: 960px) {
    /* Mesmo mecanismo da foto lateral do modelo 02: quem decide as duas
       colunas é o conteúdo, não uma classe a mais no HTML. */
    .lp-hero__inner:has(.lp-hero__form) { grid-template-columns: 1.1fr minmax(360px, .9fr); align-items: start; }
    .lp-hero__inner:has(.lp-hero__form) .lp-hero__content {
        max-width: 620px;
        margin: 0;
        text-align: left;
        padding-top: 1rem;
    }
    .lp-hero__inner:has(.lp-hero__form) h1 { margin-left: 0; margin-right: 0; }
    .lp-hero__inner:has(.lp-hero__form) .lp-hero__sub { margin-left: 0; }
    .lp-hero__inner:has(.lp-hero__form) .lp-hero__cta { justify-content: flex-start; }
    .lp-hero__inner:has(.lp-hero__form) .lp-hero__proof {
        margin-left: 0;
        justify-content: flex-start;
    }
}

/* ---------- BARRA FIXA DE AÇÕES ---------- */

/* Só no celular. No desktop o botão do cabeçalho já acompanha a rolagem, e
   uma barra presa ao rodapé comeria a última linha de cada seção. */
.lp-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: none;
    gap: .5rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--lp-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--lp-border);
    /* Entra deslizando quando o topo sai da tela; ver data-lp-actionbar no JS. */
    transform: translateY(110%);
    transition: transform .28s var(--lp-ease);
}
.lp-actionbar.is-visible { transform: none; }
.lp-actionbar__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .85rem .5rem;
    border-radius: var(--lp-radius-sm);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
}
.lp-actionbar__btn--whats { background: var(--lp-accent); color: var(--lp-on-accent); }
.lp-actionbar__btn--whats:hover { color: var(--lp-on-accent); }
.lp-actionbar__btn--whats svg { width: 18px; height: 18px; flex-shrink: 0; }
.lp-actionbar__btn--primary { background: var(--lp-primary); color: var(--lp-on-primary); }
.lp-actionbar__btn--primary:hover { color: var(--lp-on-primary); }

@media (max-width: 959px) {
    .lp-actionbar { display: flex; }
    /* O rodapé precisa caber acima da barra, senão a última linha —
       que é onde mora o link da política de privacidade — fica embaixo dela. */
    .lp-footer { padding-bottom: 5.5rem; }
}

/* ---------- COMO FUNCIONA (PASSOS) ---------- */

.lp-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    counter-reset: passo;
}
.lp-step {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-sm);
}
.lp-step__num {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--lp-on-primary);
    background: var(--lp-primary);
}
.lp-step__body h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.lp-step__body p { margin: 0; color: var(--lp-text-soft); font-size: .95rem; }
.lp-steps__cta { margin-top: 2rem; text-align: center; }

/* O fio que liga um passo ao outro. Some quando os cartões empilham, onde
   ele apontaria para o lado errado, e quando a grade quebra em duas linhas
   não há como saber onde a linha termina — por isso só a partir do desktop. */
@media (min-width: 960px) {
    .lp-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(1.5rem + 22px);
        right: -1rem;
        width: 1rem;
        border-top: 2px dashed var(--lp-border);
    }
}

/* ---------- WHATSAPP: BOTÃO E JANELA DE CONVERSA ---------- */

/* O botão abre uma janela de conversa no próprio site. Quem envia continua
   sendo o WhatsApp — a janela existe para a pessoa escrever a PRIMEIRA frase
   aqui, em vez de chegar do outro lado com a mensagem padrão de todo mundo. */
.lp-wa {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 95;
    display: flex;
    justify-content: flex-end;
}

.lp-wa__float {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    min-width: 60px;
    padding: 0;
    overflow: hidden;
    border-radius: 999px;
    background: var(--lp-accent);
    color: var(--lp-on-accent);
    font-weight: 700;
    box-shadow: 0 12px 30px var(--lp-accent-shadow-strong);
    transition: min-width .3s var(--lp-ease), padding .3s var(--lp-ease), box-shadow .25s var(--lp-ease), transform .25s var(--lp-ease);
}
.lp-wa__float svg { width: 30px; height: 30px; flex: none; }
/* O rótulo abre no hover e no foco pelo teclado: quem navega sem mouse
   também precisa saber para onde o botão leva antes de acioná-lo. */
.lp-wa__float-label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .3s var(--lp-ease), opacity .25s var(--lp-ease), margin .3s var(--lp-ease);
}
.lp-wa:hover .lp-wa__float,
.lp-wa__float:focus-visible { padding: 0 1.5rem 0 1.125rem; }
.lp-wa:hover .lp-wa__float-label,
.lp-wa__float:focus-visible .lp-wa__float-label { max-width: 10rem; opacity: 1; margin-left: .625rem; }
.lp-wa.is-open .lp-wa__float { transform: scale(.92); }

.lp-wa__chat {
    position: absolute;
    right: 0;
    bottom: 74px;
    width: 340px;
    max-width: calc(100vw - 2.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--lp-bg);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-lg);
    box-shadow: var(--lp-shadow-lg);
    transform-origin: bottom right;
    animation: lpWaPop .24s var(--lp-ease);
}
.lp-wa__chat[hidden] { display: none; }
@keyframes lpWaPop {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.lp-wa__head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem .9rem;
    background: var(--lp-accent-dark);
    color: #fff;
}
.lp-wa__avatar {
    position: relative;
    width: 42px; height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}
.lp-wa__avatar svg { width: 24px; height: 24px; }
.lp-wa__online {
    position: absolute;
    right: 0; bottom: 1px;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #4ade80;
    border: 2px solid var(--lp-accent-dark);
}
.lp-wa__id { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; min-width: 0; }
.lp-wa__id strong { font-family: var(--lp-font-display); font-size: .95rem; }
.lp-wa__id em { font-style: normal; font-size: .72rem; color: rgba(255, 255, 255, .85); }
.lp-wa__close {
    flex: none;
    width: 30px; height: 30px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--lp-radius-sm);
    background: transparent;
    color: #fff;
    opacity: .85;
}
.lp-wa__close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.lp-wa__close svg { width: 18px; height: 18px; }

/* O fundo trama a conversa como no aplicativo — é o que faz a janela ser
   reconhecida como WhatsApp em vez de mais um formulário. */
.lp-wa__body {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem .9rem;
    max-height: 300px;
    overflow-y: auto;
    background-color: #ece5dd;
    background-image: radial-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px);
    background-size: 18px 18px;
}
.lp-wa__msg { display: flex; }
.lp-wa__msg--out { justify-content: flex-end; }
.lp-wa__bubble {
    max-width: 82%;
    padding: .55rem .75rem;
    font-size: .9rem;
    line-height: 1.45;
    /* Cor fixa, e não o token do cliente: as bolhas ficam sobre o bege do
       aplicativo, que não muda com a marca. */
    color: #111b21;
    background: #fff;
    border-radius: 12px;
    border-top-left-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.lp-wa__msg--out .lp-wa__bubble {
    background: #d7f8c8;
    border-radius: 12px;
    border-top-right-radius: 3px;
}

.lp-wa__compose {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem;
    background: var(--lp-bg-alt);
    border-top: 1px solid var(--lp-border);
}
.lp-wa__input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: .9rem;
    padding: .65rem .9rem;
    border: 1px solid var(--lp-border);
    border-radius: 999px;
    background: var(--lp-bg);
    color: var(--lp-text);
}
.lp-wa__input:focus {
    outline: none;
    border-color: var(--lp-accent);
    box-shadow: 0 0 0 3px var(--lp-accent-light, var(--lp-accent-shadow));
}
.lp-wa__send {
    flex: none;
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--lp-accent);
    color: var(--lp-on-accent);
    transition: background .2s var(--lp-ease), transform .15s var(--lp-ease);
}
.lp-wa__send:hover { background: var(--lp-accent-dark); color: #fff; transform: scale(1.05); }
.lp-wa__send svg { width: 20px; height: 20px; margin-left: -2px; }

@media (max-width: 560px) {
    .lp-wa { right: 1rem; bottom: 1rem; }
}
@media print {
    .lp-wa { display: none; }
}

/* ---------- ÍCONES DE LINHA NOS CARTÕES ---------- */

/* O campo `icon` aceita duas coisas: um nome do catálogo, que vira SVG, e um
   emoji, que continua saindo como texto. O emoji herda o `font-size` da
   caixa; o SVG precisa de medida própria, senão a regra genérica
   `svg { max-width: 100% }` o estica até a largura do cartão.

   A medida é ~48% do lado da caixa, que é onde o traço fino fica legível sem
   encostar na borda. */
.lp-service-card__icon svg,
.lp-mvv-card__icon svg,
.lp-practice-card__icon svg { width: 26px; height: 26px; }
.lp-service-hero__icon svg { width: 30px; height: 30px; }

/* A página aberta, no menu do celular. Sem sublinhado aqui: o item ocupa a
   linha inteira, e o que distingue é o peso e a cor da marca. */
.lp-mobile-menu li.is-current > a:not(.lp-btn) {
    color: var(--lp-brand-on-light);
    font-weight: 700;
}

/* =========================================================
   TOM CLARO — `variants.tone = 'claro'`

   O modelo nasceu escuro: topo, banners e rodapé em quase-preto, que é o que
   dá peso a uma página de venda agressiva. Não serve a toda marca, e para
   uma identidade de dourado sobre bege serve menos ainda.

   O desenho aqui é o que a cliente descreveu, na ordem em que ela descreveu:

     - no alto da página o cabeçalho é TRANSPARENTE e a marca aparece grande;
       ao rolar, a barra fica branca e a marca encolhe;
     - o topo é um degradê entre os dois beges do manual (perolado e areia);
     - o texto de destaque é dourado DEGRADÊ, no espírito do logotipo;
     - as seções alternam branco e um degradê de verde oliva com cinza quente;
     - nas páginas internas o texto corrido fica sempre sobre branco, e o
       banner e a chamada final levam degradê.

   A regra que atravessa tudo: cor é superfície, texto é legibilidade. Cada
   fundo aqui foi medido com Contrast::razao antes de entrar.
   ========================================================= */

/* ---------- cabeçalho: transparente em cima, branco ao rolar ---------- */

.lp-tone-claro .lp-header { background: transparent; box-shadow: none; }

/* Sobre o topo claro, o menu não pode ser branco como no tom escuro. */
/* No topo o menu corre sobre o canto oliva do degradê, onde o tom apagado
   cai para 4,4:1. O escuro cheio segura 7,6:1 no pior ponto. */
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-nav a { color: var(--lp-text); }
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-nav a:hover,
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-nav li.is-current > a { color: var(--lp-text); }
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-nav a::after { background: var(--lp-brand); }
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-logo__text { color: var(--lp-text); text-shadow: none; }
.lp-tone-claro .lp-burger span { background: var(--lp-text); }

/* A marca é a positiva nos dois estados: o fundo é claro em ambos. */
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-logo__img--dark { opacity: 0; }
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-logo__img--light { opacity: 1; }
/* A sombra existia para a marca não sumir no hero escuro. Aqui ela suja. */
.lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-logo img { filter: none; }

/* GRANDE em cima, menor ao rolar.

   O modelo tinha o token `--lp-logo-h-hero` desde sempre e nunca o usava no
   cabeçalho — só no rodapé. Por isso a marca não encolhia: ela nascia no
   tamanho pequeno e ficava nele. A transição de altura já existe na regra
   base de `.lp-logo img`. */
@media (min-width: 720px) {
    .lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-logo img {
        height: var(--lp-logo-h-hero);
        max-width: var(--lp-logo-max-hero);
    }
}
.lp-tone-claro .lp-logo img { transition: height .3s var(--lp-ease), max-width .3s var(--lp-ease), filter .3s var(--lp-ease); }

/* A barra cresce para caber a marca grande e encolhe junto com ela.

   Sem isto a logo de 96px estoura uma barra de 76px e invade o topo do
   conteúdo. A altura acompanha o token da marca, não um número solto: quem
   mudar `logo_height_hero` no cadastro não precisa mexer em CSS. */
@media (min-width: 720px) {
    .lp-tone-claro .lp-header:not(.is-scrolled):not(.is-inner) .lp-header__inner {
        height: calc(var(--lp-logo-h-hero) + 2rem);
    }
    /* O topo desce junto, senão o conteúdo nasce embaixo da barra alta. */
    .lp-tone-claro .lp-hero { padding-top: calc(var(--lp-logo-h-hero) + 5rem); }
}
.lp-tone-claro .lp-header__inner { transition: height .3s var(--lp-ease); }

/* Rolou: barra branca. O fio dourado embaixo é o que separa o branco da
   barra do branco da seção sem precisar de sombra pesada. */
.lp-tone-claro .lp-header.is-scrolled,
.lp-tone-claro .lp-header.is-inner {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--lp-brand) 30%, transparent);
    box-shadow: 0 2px 16px rgba(0, 0, 0, .04);
}

/* ---------- o topo: degradê dos dois beges do manual ---------- */

/* Os dois tons secundários do manual, sem diluição: cinza quente e verde
   oliva. O que muda com a largura é a DIREÇÃO, e não a cor.

   O oliva cheio dá 1,70:1 para o ouro do título e 2,80:1 para o texto de
   apoio — ilegível nos dois casos. Então ele nunca fica atrás de texto: a
   parada segura o cinza quente até onde a coluna de texto termina, e o
   oliva ocupa o espaço que sobra. No celular isso é embaixo; no desktop,
   onde a coluna de texto ocupa a metade esquerda, é à direita, atrás do
   cartão branco do formulário — que é justamente onde ele mais aparece. */
.lp-tone-claro .lp-hero {
    background: linear-gradient(170deg,
        var(--lp-palette-3) 0%,
        var(--lp-palette-3) 58%,
        var(--lp-palette-2) 140%);
    color: var(--lp-text);
}
@media (min-width: 960px) {
    /* 45deg sobe para a direita: o oliva ocupa o triângulo de cima à
       direita — atrás e acima do cartão branco do formulário — e o texto,
       que mora embaixo à esquerda, fica todo sobre o cinza quente. A parada
       em 62% é o ponto onde o canto superior direito do <h1> ainda alcança;
       depois dela não há mais texto no caminho. */
    .lp-tone-claro .lp-hero {
        background: linear-gradient(45deg,
            var(--lp-palette-3) 0%,
            var(--lp-palette-3) 62%,
            var(--lp-palette-2) 100%);
    }
}
/* Os filetes e o véu existiam para dar textura ao fundo escuro; sobre o bege
   viram sujeira. */
.lp-tone-claro .lp-hero::after,
.lp-tone-claro .lp-hero__overlay { display: none; }

/* Com foto de fundo o véu volta, claro, senão o texto escuro some na imagem. */
.lp-tone-claro .lp-hero:has(.lp-hero__bg) .lp-hero__overlay {
    display: block;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--lp-palette-3) 94%, transparent) 0%,
        color-mix(in srgb, var(--lp-palette-3) 94%, transparent) 32%,
        color-mix(in srgb, var(--lp-palette-2) 90%, transparent) 130%);
}

.lp-tone-claro .lp-hero h1 { color: var(--lp-text); }
.lp-tone-claro .lp-hero__sub { color: var(--lp-text-soft); }
.lp-tone-claro .lp-eyebrow--on-dark {
    background: rgba(255, 255, 255, .75);
    color: var(--lp-heading);
    border: 1px solid color-mix(in srgb, var(--lp-brand) 30%, transparent);
}
/* A prova e a faixa de serviços ficam no PÉ do topo, onde o degradê já
   puxou para o oliva. Lá o tom apagado cai para 3,3:1; o escuro cheio
   segura 6,5:1 no pior ponto que o degradê alcança. */
.lp-tone-claro .lp-hero__proof { border-top-color: color-mix(in srgb, var(--lp-brand) 25%, transparent); color: var(--lp-text); }
.lp-tone-claro .lp-hero__proof-mark { background: var(--lp-heading); }
.lp-tone-claro .lp-hero__strip::before { background: color-mix(in srgb, var(--lp-brand) 25%, transparent); }
.lp-tone-claro .lp-hero__services li { color: var(--lp-text); }
.lp-tone-claro .lp-hero__services a { color: var(--lp-text); }
.lp-tone-claro .lp-hero__services a:hover { color: var(--lp-heading); }
.lp-tone-claro .lp-hero__form { border: 1px solid color-mix(in srgb, var(--lp-brand) 22%, transparent); box-shadow: 0 24px 48px rgba(0, 0, 0, .08); }
.lp-tone-claro .lp-btn--light {
    background: rgba(255, 255, 255, .7);
    color: var(--lp-text);
    backdrop-filter: none;
    border: 1.5px solid color-mix(in srgb, var(--lp-brand) 35%, transparent);
}
.lp-tone-claro .lp-btn--light:hover { background: #fff; border-color: var(--lp-brand); color: var(--lp-heading); }

/* ---------- o destaque em dourado degradê, como o logotipo ---------- */

/* O logotipo é um dourado que vai do escuro ao claro e volta. O texto imita
   isso com `background-clip`, mas dentro de uma faixa ESCURA do dourado: o
   trecho claro da marca, ampliado num texto, cairia para menos de 2:1 e a
   frase ficaria ilegível justamente onde ela mais importa.

   `color` vem antes e fica: navegador sem `background-clip: text` mostra o
   dourado chapado em vez de texto invisível. */
.lp-tone-claro .lp-hero h1 .lp-highlight,
.lp-tone-claro .lp-section-head h2,
.lp-tone-claro .lp-about__grid h2,
.lp-tone-claro .lp-single__content h2,
.lp-tone-claro .lp-hero__form-title,
.lp-tone-claro .lp-stat__num {
    color: var(--lp-heading);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .lp-tone-claro .lp-hero h1 .lp-highlight,
    .lp-tone-claro .lp-section-head h2,
    .lp-tone-claro .lp-about__grid h2,
    .lp-tone-claro .lp-single__content h2,
    .lp-tone-claro .lp-stat__num {
        /* O topo da rampa é `--lp-heading`, e NÃO `--lp-brand`.
           O realce cheio dá 2,59:1 sobre o cinza quente e 2,87:1 sobre o
           bege areia — abaixo dos 3:1 que texto grande exige. O mesmo ouro
           um passo mais fundo fica entre 3,50:1 e 7,16:1 conforme a
           superfície, e o brilho da logomarca continua lá. */
        background: linear-gradient(96deg,
            color-mix(in srgb, var(--lp-heading) 80%, #000) 0%,
            var(--lp-heading) 38%,
            color-mix(in srgb, var(--lp-heading) 74%, #000) 62%,
            var(--lp-heading) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* Sem isto o degradê de cada linha recomeça e o texto fica listrado. */
        background-size: 100% 100%;
    }
}

/* O fio sob o título da seção, no mesmo dourado. */
.lp-tone-claro .lp-section-head h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 1.125rem auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--lp-heading) 80%, #000), var(--lp-heading), color-mix(in srgb, var(--lp-heading) 45%, transparent));
}

/* ---------- o ritmo da página: branco e o degradê oliva/cinza ---------- */

/* A alternância é por POSIÇÃO, não por classe no HTML: a seção que some
   quando o cliente não tem conteúdo (depoimentos sem depoimento, blog sem
   matéria) não deixa buraco na sequência de cores. O topo é a primeira e
   tem regra própria. */
/* A alternância NÃO toca em seção que já declara a própria superfície. O
   topo e a chamada final são as duas, e é por isso que elas aparecem nos
   dois `:not()`.

   Sem isso a cor delas passava a depender da PARIDADE. `:nth-of-type(odd)`
   traz um `:not(.lp-hero)` que o par não tem, então ímpar pesa 0-4-1 e par
   pesa 0-3-1: a chamada final ganhava do próprio estilo quando caía em
   ímpar e perdia quando caía em par. Inserir uma seção no meio da home
   trocava a cor de outra, na outra ponta da página. */
.lp-tone-claro .lp-main > section:nth-of-type(even):not(.lp-hero):not(.lp-section--dark) {
    background: var(--lp-bg);
}
/* Bege areia e cinza quente, os dois direto do manual — sem branco no meio.
   Antes eu lavava os dois com `color-mix(... #fff)` para clarear, e o
   resultado era um cinza sem temperatura que a cliente leu como azul. */
.lp-tone-claro .lp-main > section:nth-of-type(odd):not(.lp-hero):not(.lp-section--dark) {
    background: linear-gradient(150deg, var(--lp-palette-4) 0%, var(--lp-palette-3) 100%);
}

/* A chamada final leva o degradê mesmo caindo em posição par — ela é o
   fecho da página, e fecho em branco não fecha nada. */
/* A chamada final é BRANCA, e não a cor mais forte da página.
   Aqui ela vem logo depois do contato, que já é bloco de cor; duas faixas
   fortes seguidas empurravam o botão para dentro do ruído em vez de
   destacá-lo. O fio dourado em cima continua marcando onde ela começa.

   Quem garante que ela é branca em qualquer posição é o `:not()` da
   alternância, logo acima — não a especificidade desta regra. */
.lp-tone-claro .lp-section--dark {
    background: var(--lp-bg);
    color: var(--lp-text);
    border-top: 1px solid color-mix(in srgb, var(--lp-brand) 25%, transparent);
}
.lp-tone-claro .lp-section--dark h1,
.lp-tone-claro .lp-section--dark h2,
.lp-tone-claro .lp-section--dark h3 { color: var(--lp-text); }
.lp-tone-claro .lp-section--dark p { color: var(--lp-text-soft); }
.lp-tone-claro .lp-section--dark .lp-eyebrow { background: transparent; color: var(--lp-heading); }

/* Sobre faixa de cor, o cartão precisa ser branco para respirar. */
.lp-tone-claro .lp-service-card,
.lp-tone-claro .lp-practice-card,
.lp-tone-claro .lp-step,
.lp-tone-claro .lp-mvv-card,
.lp-tone-claro .lp-faq__item,
.lp-tone-claro .lp-stat { background: var(--lp-bg); }

/* Campo de formulário e barra de conversa ficam BRANCOS.

   Os dois usavam `--lp-bg-alt`, que no tom escuro é um cinza discreto. Aqui
   ele virou o bege perolado do topo — e o campo dentro do cartão branco
   ficava amarelado, com cara de coisa desabilitada. */
.lp-tone-claro .lp-form__field input,
.lp-tone-claro .lp-form__field textarea,
.lp-tone-claro .lp-wa__compose { background: var(--lp-bg); }
.lp-tone-claro .lp-form__field input:focus,
.lp-tone-claro .lp-form__field textarea:focus { background: var(--lp-bg); }

/* ---------- páginas internas ---------- */

/* O banner interno é o "topo" da página: mesmo degradê bege do hero. */
.lp-tone-claro .lp-page-hero,
.lp-tone-claro .lp-service-hero,
.lp-tone-claro .lp-services-archive__hero {
    background: linear-gradient(160deg,
        var(--lp-palette-3) 0%,
        var(--lp-palette-3) 38%,
        var(--lp-palette-2) 140%);
    color: var(--lp-text);
}
.lp-tone-claro .lp-page-hero::after,
.lp-tone-claro .lp-service-hero::after,
.lp-tone-claro .lp-services-archive__hero::after { display: none; }
.lp-tone-claro .lp-page-hero h1,
.lp-tone-claro .lp-service-hero h1,
.lp-tone-claro .lp-services-archive__hero h1 { color: var(--lp-text); }
.lp-tone-claro .lp-page-hero p,
.lp-tone-claro .lp-service-hero p { color: var(--lp-text-soft); }

/* O que vinha junto com o banner escuro e ninguém tinha olhado: o chapéu,
   o quadrado do ícone e o painel "como conduzimos" são vidro branco sobre
   escuro — branco sobre branco translúcido, aqui, é texto que some. Sobre
   o degradê claro eles viram cartão sólido, com o texto do cliente. */
.lp-tone-claro .lp-service-hero__cat {
    background: rgba(255, 255, 255, .85);
    border-color: color-mix(in srgb, var(--lp-brand) 35%, transparent);
    color: var(--lp-heading);
}
.lp-tone-claro .lp-service-hero__cat:hover { background: #fff; color: var(--lp-heading); }
.lp-tone-claro .lp-service-hero__icon {
    background: rgba(255, 255, 255, .85);
    border-color: color-mix(in srgb, var(--lp-brand) 30%, transparent);
    color: var(--lp-heading);
}
.lp-tone-claro .lp-service-hero h1 { color: var(--lp-text); }
.lp-tone-claro .lp-service-hero__panel {
    background: rgba(255, 255, 255, .92);
    border-color: color-mix(in srgb, var(--lp-brand) 25%, transparent);
    box-shadow: var(--lp-shadow);
}
.lp-tone-claro .lp-service-hero__panel h2 { color: var(--lp-text); }
.lp-tone-claro .lp-service-hero__panel li { color: var(--lp-text-soft); }
.lp-tone-claro .lp-service-hero__panel li::before { background: var(--lp-heading); }
.lp-tone-claro .lp-services-archive__hero p { color: var(--lp-text-soft); }

/* Texto corrido SEMPRE sobre branco: é onde se lê de verdade, e cor de
   fundo atrás de parágrafo longo cansa. */
.lp-tone-claro .lp-single,
.lp-tone-claro .lp-archive,
.lp-tone-claro .lp-main > section.lp-section:has(.lp-single__content),
.lp-tone-claro .lp-main > section.lp-section:has(.lp-about-page__content) { background: var(--lp-bg); }

/* ---------- a paleta nos cartões ---------- */

.lp-tone-claro .lp-services__grid > *:nth-child(4n + 1) { --lp-card-accent: var(--lp-palette-1); }
.lp-tone-claro .lp-services__grid > *:nth-child(4n + 2) { --lp-card-accent: var(--lp-palette-2); }
.lp-tone-claro .lp-services__grid > *:nth-child(4n + 3) { --lp-card-accent: var(--lp-palette-3); }
.lp-tone-claro .lp-services__grid > *:nth-child(4n + 4) { --lp-card-accent: var(--lp-palette-4); }
.lp-tone-claro .lp-practice-grid > *:nth-child(3n + 1) { --lp-card-accent: var(--lp-palette-1); }
.lp-tone-claro .lp-practice-grid > *:nth-child(3n + 2) { --lp-card-accent: var(--lp-palette-2); }
.lp-tone-claro .lp-practice-grid > *:nth-child(3n + 3) { --lp-card-accent: var(--lp-palette-3); }
/* Os passos NÃO entram no rodízio, e a razão é o que eles são: uma
   sequência. Quatro cartões de cores diferentes dizem "quatro coisas
   distintas"; quatro cartões iguais, numerados, dizem "um caminho, nesta
   ordem" — que é a leitura certa. Serviços e segmentos continuam variando,
   porque lá cada cartão É uma coisa distinta. */
.lp-tone-claro .lp-steps__list > * { --lp-card-accent: var(--lp-palette-5); }
.lp-tone-claro .lp-mvv-grid > *:nth-child(3n + 1) { --lp-card-accent: var(--lp-palette-1); }
.lp-tone-claro .lp-mvv-grid > *:nth-child(3n + 2) { --lp-card-accent: var(--lp-palette-2); }
.lp-tone-claro .lp-mvv-grid > *:nth-child(3n + 3) { --lp-card-accent: var(--lp-palette-3); }

.lp-tone-claro .lp-service-card__icon,
.lp-tone-claro .lp-practice-card__icon,
.lp-tone-claro .lp-mvv-card__icon {
    background: color-mix(in srgb, var(--lp-card-accent, var(--lp-brand)) 20%, #fff);
    border-color: color-mix(in srgb, var(--lp-card-accent, var(--lp-brand)) 45%, transparent);
    color: var(--lp-text);
}

/* O fio de cor nasce curto e cresce no hover: movimento com motivo. */
.lp-tone-claro .lp-service-card,
.lp-tone-claro .lp-practice-card,
.lp-tone-claro .lp-step,
.lp-tone-claro .lp-mvv-card {
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--lp-ease), box-shadow .3s var(--lp-ease), border-color .3s var(--lp-ease);
}
.lp-tone-claro .lp-service-card::before,
.lp-tone-claro .lp-practice-card::before,
.lp-tone-claro .lp-step::before,
.lp-tone-claro .lp-mvv-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 56px;
    height: 3px;
    background: var(--lp-card-accent, var(--lp-brand));
    transition: width .35s var(--lp-ease);
}
.lp-tone-claro .lp-service-card:hover,
.lp-tone-claro .lp-practice-card:hover,
.lp-tone-claro .lp-step:hover,
.lp-tone-claro .lp-mvv-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}
.lp-tone-claro .lp-service-card:hover::before,
.lp-tone-claro .lp-practice-card:hover::before,
.lp-tone-claro .lp-step:hover::before,
.lp-tone-claro .lp-mvv-card:hover::before { width: 100%; }

/* Texto ESCURO dentro do número do passo: o cinza quente com texto branco
   dava 1,91:1, contra o mínimo de 4,5:1. Escuro, o pior dos tons passa. */
/* O numeral é BRANCO, e por isso o disco é o tom reservado UM PASSO MAIS
   FUNDO — não o tom puro. Branco sobre o oliva da cliente dá 3,01:1, e
   numeral pequeno precisa de 4,5:1; a 80% de preto o mesmo verde chega a
   4,51:1 e continua sendo a cor do filete que corre no alto do cartão. */
.lp-tone-claro .lp-step__num {
    background: color-mix(in srgb, var(--lp-card-accent) 80%, #000);
    color: #fff;
}
.lp-tone-claro .lp-stat { border-top: 3px solid var(--lp-card-accent, var(--lp-brand)); }
.lp-tone-claro .lp-about__stats .lp-stat:nth-child(3n + 1) { --lp-card-accent: var(--lp-palette-1); }
.lp-tone-claro .lp-about__stats .lp-stat:nth-child(3n + 2) { --lp-card-accent: var(--lp-palette-2); }
.lp-tone-claro .lp-about__stats .lp-stat:nth-child(3n + 3) { --lp-card-accent: var(--lp-palette-3); }

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

/* O mesmo degradê do topo, no mesmo ângulo: a página abre e fecha com a
   mesma imagem. O oliva cai no canto de cima à direita, que no rodapé é a
   coluna de contato — e por isso o texto das colunas sobe de `text-soft`
   (2,80:1 sobre o oliva cheio) para `text` (5,62:1). A linha legal do fim
   fica no canto de baixo à esquerda, que é cinza quente, e pode continuar
   discreta. */
.lp-tone-claro .lp-footer {
    background: linear-gradient(45deg,
        var(--lp-palette-3) 0%,
        var(--lp-palette-3) 62%,
        var(--lp-palette-2) 100%);
    color: var(--lp-text);
    border-top: 3px solid var(--lp-brand);
}
.lp-tone-claro .lp-footer__brand p { color: var(--lp-text-soft); }
.lp-tone-claro .lp-footer__col h2 { color: var(--lp-text); }
.lp-tone-claro .lp-footer__col a,
.lp-tone-claro .lp-footer__nap li { color: var(--lp-text); }
.lp-tone-claro .lp-footer__col a:hover { color: var(--lp-heading); }
.lp-tone-claro .lp-footer__social a { color: var(--lp-text); }
.lp-tone-claro .lp-footer__nap-icon { color: var(--lp-heading); }
.lp-tone-claro .lp-footer__social a {
    background: rgba(255, 255, 255, .7);
    border: 1px solid color-mix(in srgb, var(--lp-brand) 25%, transparent);
    color: var(--lp-text-soft);
}
.lp-tone-claro .lp-footer__social a:hover { background: var(--lp-brand); border-color: var(--lp-brand); color: var(--lp-on-brand); }
.lp-tone-claro .lp-footer__bottom { border-top-color: color-mix(in srgb, var(--lp-brand) 22%, transparent); color: var(--lp-text-muted); }
.lp-tone-claro .lp-footer__cnpj,
.lp-tone-claro .lp-footer__registry,
.lp-tone-claro .lp-footer__legal a { color: var(--lp-text-soft); }
.lp-tone-claro .lp-footer__credit-link { color: var(--lp-text-muted); }
.lp-tone-claro .lp-footer__credit-link:hover { color: var(--lp-text); }

@media print {
    .lp-wa { display: none; }
}