/* =========================================================
   MODELO 02

   Portado do tema WordPress que atende esta linhagem de sites. O que
   mudou na travessia, e por quê:

   - O `:root` saiu. As cores, as medidas do logo e a escala do título
     vêm do cadastro do cliente (partials/tokens.blade.php). É isso que
     torna um fork por cliente desnecessário: dois sites deste modelo são
     dois conjuntos de valores, servidos pelo mesmo arquivo.

   - Os nomes das variáveis descrevem PAPEL, não cor. O tema de origem
     chamava a primária de `--em-navy` e a secundária de `--em-gold`, o
     que vira mentira no primeiro cliente verde. Aqui são `--em-primary`
     e `--em-brand`.

   - A cor do texto sobre a marca (`--em-on-primary`, `--em-on-accent`,
     `--em-on-brand`) é calculada pela luminância da própria cor. O tema
     escrevia `color: #fff` fixo, o que só funciona com marca escura.

   - O verde continua reservado ao WhatsApp, como no tema: o botão de
     conversão 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(--em-font-sans);
    color: var(--em-text);
    background: var(--em-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(--em-primary); text-decoration: none; transition: color .2s var(--em-ease); }
a:hover { color: var(--em-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(--em-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(--em-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(--em-text-soft); }

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

.em-section-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
/* Sobrescritura: losango dourado do logotipo + rótulo em caixa alta */
.em-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(--em-font-display);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--em-brand-on-light);
    margin-bottom: .875rem;
}
.em-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: var(--em-brand);
    transform: rotate(45deg);
}
.em-section-head .em-eyebrow { justify-content: center; }
/* Sobre fundo escuro o dourado clareia para manter o contraste */
.em-hero .em-eyebrow,
.em-page-hero .em-eyebrow,
.em-section--dark .em-eyebrow,
.em-single__cta .em-eyebrow {
    color: var(--em-brand-on-dark);
}
.em-hero .em-eyebrow::before,
.em-page-hero .em-eyebrow::before,
.em-section--dark .em-eyebrow::before,
.em-single__cta .em-eyebrow::before {
    background: var(--em-brand-on-dark);
}

/* ---------- BUTTONS ---------- */
.em-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.6rem;
    font-family: var(--em-font-display);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--em-radius-sm);
    border: 0;
    cursor: pointer;
    transition: transform .2s var(--em-ease), box-shadow .2s var(--em-ease), background .2s var(--em-ease);
    line-height: 1;
    white-space: nowrap;
}
.em-btn:hover { transform: translateY(-2px); }
.em-btn--primary { background: var(--em-primary); color: var(--em-on-primary); box-shadow: 0 6px 16px var(--em-primary-shadow); }
.em-btn--primary:hover { background: var(--em-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 */
.em-btn--brand { background: var(--em-brand); color: var(--em-on-brand); box-shadow: 0 6px 16px var(--em-brand-shadow); }
.em-btn--brand:hover { background: var(--em-brand-on-dark); color: var(--em-on-brand); box-shadow: 0 10px 22px var(--em-brand-shadow-strong); }
.em-btn--whatsapp { background: var(--em-accent); color: var(--em-on-accent); box-shadow: 0 6px 16px var(--em-accent-shadow); }
.em-btn--whatsapp:hover { background: var(--em-accent-dark); color: var(--em-on-accent); box-shadow: 0 10px 22px var(--em-accent-shadow-strong); }
.em-btn--whatsapp svg { width: 18px; height: 18px; flex-shrink: 0; }
.em-btn--ghost { background: transparent; color: var(--em-text); border: 1.5px solid var(--em-border); }
.em-btn--ghost:hover { border-color: var(--em-primary); color: var(--em-primary); }
/* Secundário sobre fundo escuro: fio dourado da marca no lugar do branco puro */
.em-btn--light { background: rgba(255, 255, 255, .08); color: #fff; backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--em-brand) 55%, transparent); }
.em-btn--light:hover { background: var(--em-brand-tint); border-color: var(--em-brand); color: var(--em-brand-on-dark); }
@media (max-width: 520px) {
    .em-hero__cta { flex-direction: column; align-items: stretch; }
    .em-hero__cta .em-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. */
.em-skip {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    padding: .75rem 1.25rem; border-radius: 0 0 var(--em-radius-sm) 0;
    background: var(--em-primary); color: var(--em-on-primary);
    font-weight: 600; text-decoration: none;
}
.em-skip:focus { left: 0; }

/* ---------- HEADER ---------- */
.em-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    transition: background .3s var(--em-ease), box-shadow .3s var(--em-ease), backdrop-filter .3s var(--em-ease);
}
.em-header.is-scrolled,
.em-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(--em-shadow-sm);
}
/* A barra do admin cobre o topo fixo enquanto o cliente está logado */
.admin-bar .em-header { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .em-header { top: 46px; }
}
.em-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--em-header-h);
    gap: 1.5rem;
}
.em-logo {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    flex-shrink: 0;
    line-height: 0; /* remove inline-gap residual */
}
.em-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 */
.em-logo img,
.em-logo img {
    height: calc(var(--em-logo-h) * var(--em-logo-mobile-ratio));
    width: auto;
    max-width: calc(var(--em-logo-max) * var(--em-logo-mobile-ratio));
    display: block;
    object-fit: contain;
    transition: filter .3s var(--em-ease), opacity .3s var(--em-ease);
}
@media (min-width: 720px) {
    .em-logo img,
    .em-logo img { height: var(--em-logo-h); max-width: var(--em-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. */
.em-logo--switch { position: relative; }
.em-logo--switch .em-logo__img--dark { position: absolute; top: 0; left: 0; }
.em-logo--switch .em-logo__img--light { opacity: 0; }
.em-header.is-scrolled .em-logo__img--dark,
.em-header.is-inner .em-logo__img--dark { opacity: 0; }
.em-header.is-scrolled .em-logo__img--light,
.em-header.is-inner .em-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. */
.em-header:not(.is-scrolled):not(.is-inner) .em-logo img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.em-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;
}
.em-header.is-scrolled .em-logo__text,
.em-header.is-inner .em-logo__text { color: var(--em-text); text-shadow: none; }
/* Logo no rodapé escuro */
.em-footer .em-logo img,
.em-footer .em-logo img {
    height: var(--em-logo-h-hero);
    max-width: var(--em-logo-max-hero);
}

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

.em-header__cta { display: none; }

.em-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;
}
.em-burger span {
    display: block;
    width: 22px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s var(--em-ease), opacity .25s var(--em-ease), background .25s var(--em-ease);
}
.em-header.is-scrolled .em-burger span,
.em-header.is-inner .em-burger span { background: var(--em-text); }
body.menu-open .em-burger span { background: var(--em-text); }
body.menu-open .em-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .em-burger span:nth-child(2) { opacity: 0; }
body.menu-open .em-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile menu */
.em-mobile-menu {
    position: fixed;
    inset: var(--em-header-h) 0 0;
    background: #fff;
    z-index: 99;
    padding: 2rem var(--em-gutter);
    transform: translateX(100%);
    transition: transform .3s var(--em-ease);
    overflow-y: auto;
}
body.menu-open .em-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; }
.em-mobile-menu ul { list-style: none; padding: 0; margin: 0 0 2rem; }
.em-mobile-menu li { border-bottom: 1px solid var(--em-border); }
/* `:not(.em-btn)` não é enfeite: sem ele este seletor [0,1,1] ganha de
   `.em-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. Vem assim do tema de origem. */
.em-mobile-menu a:not(.em-btn) {
    display: block;
    padding: 1rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--em-text);
}
/* Submenu no celular: fica aberto, só recuado — nada de acordeão para abrir. */
.em-mobile-menu .sub-menu { margin: 0; padding-left: 1rem; border-top: 1px solid var(--em-border); }
.em-mobile-menu .sub-menu li:last-child { border-bottom: 0; }
.em-mobile-menu .sub-menu a { font-size: 1rem; padding: .8rem 0; color: var(--em-text-soft); }
.em-mobile-menu .em-btn { width: 100%; justify-content: center; margin-top: .5rem; }

/* ---------- HERO ---------- */
.em-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--em-on-primary);
    overflow: hidden;
    padding: calc(var(--em-header-h) + 3rem) 0 4rem;
    background: linear-gradient(148deg, var(--em-primary-deeper) 0%, var(--em-primary) 55%, var(--em-primary-soft) 100%);
}
/* Filetes horizontais discretos: referência ao papel pautado dos livros contábeis */
.em-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
    );
}
.em-hero__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}
.em-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(148deg,
        color-mix(in srgb, var(--em-primary-deeper) 92%, transparent) 0%,
        color-mix(in srgb, var(--em-primary) 86%, transparent) 55%,
        color-mix(in srgb, var(--em-primary-soft) 80%, transparent) 100%);
    z-index: 1;
}
.em-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;
}
.em-hero__content {
    max-width: 58rem;
    margin: 0 auto;
    text-align: center;
}
.em-hero h1 {
    font-size: var(--em-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. */
}
.em-hero__sub { max-width: 46rem; margin-left: auto; margin-right: auto; }
.em-hero__cta { justify-content: center; }
.em-hero .em-hero__proof {
    display: block;
    border-top: 0;
    padding-top: 0;
    margin: 0 auto;
    text-align: center;
}
.em-hero .em-hero__proof-mark {
    display: inline-block;
    margin: 0 .5rem .1rem 0;
    vertical-align: middle;
}
.em-hero h1 {
    color: #fff;
    margin-bottom: 1.25rem;
    animation: emFadeUp .8s var(--em-ease) both;
}
/* Destaque do título: dourado do logotipo, sem gradiente */
.em-hero h1 .em-highlight { color: var(--em-brand-on-dark); }
.em-hero__sub {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    color: rgba(255, 255, 255, .85);
    margin-bottom: 2rem;
    animation: emFadeUp .8s .15s var(--em-ease) both;
}
.em-hero__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-bottom: 2.25rem; animation: emFadeUp .8s .3s var(--em-ease) both; }
.em-hero__proof {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    max-width: 46rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    animation: emFadeUp .8s .45s var(--em-ease) both;
}
.em-hero__proof-mark {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    margin-top: .45rem;
    background: var(--em-brand-on-dark);
    transform: rotate(45deg);
}

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

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


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

/* ---------- SERVICES ---------- */
.em-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.em-service-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--em-radius);
    border: 1px solid var(--em-border);
    transition: transform .25s var(--em-ease), box-shadow .25s var(--em-ease), border-color .25s var(--em-ease);
    display: flex;
    flex-direction: column;
}
.em-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--em-shadow);
    border-color: var(--em-primary-light);
}
.em-service-card__icon {
    width: 54px; height: 54px;
    border-radius: 4px;
    background: var(--em-brand-tint);
    border: 1px solid color-mix(in srgb, var(--em-brand) 40%, transparent);
    color: var(--em-brand-on-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
    line-height: 1;
}
.em-service-card h2,
.em-service-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.em-service-card h2 a,
.em-service-card h3 a { color: var(--em-text); }
.em-service-card h2 a:hover,
.em-service-card h3 a:hover { color: var(--em-primary); }
.em-service-card p { flex: 1; margin-bottom: 1rem; }
.em-service-card__link {
    font-weight: 600;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
.em-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(--em-ease); }
.em-service-card__link:hover::after { transform: translateX(4px); }

/* ---------- TESTIMONIALS ---------- */
.em-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;
}
.em-testimonials__track::-webkit-scrollbar { display: none; }
.em-testimonial {
    scroll-snap-align: start;
    background: #fff;
    padding: 2.25rem;
    border-radius: var(--em-radius);
    border: 1px solid var(--em-border);
}
.em-testimonial__stars { color: #FBBF24; font-size: 1.125rem; margin-bottom: 1rem; letter-spacing: 2px; }
.em-testimonial__text { font-size: 1.05rem; color: var(--em-text); margin-bottom: 1.5rem; }
.em-testimonial__person { display: flex; align-items: center; gap: .875rem; }
.em-testimonial__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--em-primary);
    color: var(--em-brand-on-dark);
    font-family: var(--em-font-display);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.25rem;
}
.em-testimonial__name { font-weight: 600; }
.em-testimonial__role { color: var(--em-text-muted); font-size: .875rem; }

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

/* ---------- CLIENTS MARQUEE ---------- */
.em-clients { padding: 4rem 0; background: var(--em-bg-alt); border-top: 1px solid var(--em-border); border-bottom: 1px solid var(--em-border); }
.em-clients__title { text-align: center; color: var(--em-text-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .15em; margin-bottom: 2rem; font-weight: 600; }
.em-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); }
.em-marquee__track {
    display: flex;
    gap: 4rem;
    animation: emMarquee 35s linear infinite;
    width: max-content;
}
.em-marquee__item {
    flex: 0 0 auto;
    height: 48px;
    display: inline-flex;
    align-items: center;
    color: var(--em-text-muted);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: .04em;
    opacity: .65;
    transition: opacity .2s var(--em-ease);
}
.em-marquee__item:hover { opacity: 1; }
.em-marquee__item img { max-height: 48px; width: auto; }

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

.em-form {
    background: #fff;
    padding: 2.25rem;
    border-radius: var(--em-radius-lg);
    border: 1px solid var(--em-border);
    box-shadow: var(--em-shadow);
}
.em-form__field { margin-bottom: 1.125rem; }
.em-form__field label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    color: var(--em-text);
    margin-bottom: .375rem;
}
.em-form__field input,
.em-form__field textarea {
    width: 100%;
    padding: .875rem 1rem;
    border: 1.5px solid var(--em-border);
    border-radius: var(--em-radius-sm);
    background: var(--em-bg-alt);
    font-size: 1rem;
    font-family: inherit;
    color: var(--em-text);
    transition: border-color .2s var(--em-ease), background .2s var(--em-ease), box-shadow .2s var(--em-ease);
}
.em-form__field input:focus,
.em-form__field textarea:focus {
    outline: 0;
    border-color: var(--em-primary);
    background: #fff;
    box-shadow: 0 0 0 4px var(--em-primary-light);
}
.em-form__field textarea { min-height: 120px; resize: vertical; }
.em-form__captcha { margin-bottom: 1.125rem; }
.em-form .em-btn { width: 100%; justify-content: center; }
.em-form__feedback { margin-top: 1rem; padding: .875rem 1rem; border-radius: var(--em-radius-sm); font-size: .9rem; display: none; }
.em-form__feedback.is-success { display: block; background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.em-form__feedback.is-error { display: block; background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* ---------- BLOG (HOME) ---------- */
.em-blog__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}
.em-post-card {
    background: #fff;
    border-radius: var(--em-radius);
    overflow: hidden;
    border: 1px solid var(--em-border);
    transition: transform .25s var(--em-ease), box-shadow .25s var(--em-ease);
    display: flex;
    flex-direction: column;
}
.em-post-card:hover { transform: translateY(-4px); box-shadow: var(--em-shadow); }
.em-post-card__thumb {
    aspect-ratio: 16/9;
    background: #EEF0F6;
    overflow: hidden;
}
.em-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--em-ease); }
.em-post-card:hover .em-post-card__thumb img { transform: scale(1.05); }
.em-post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.em-post-card__meta { font-size: .8125rem; color: var(--em-text-muted); margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.em-post-card__title { font-size: 1.125rem; margin-bottom: .5rem; }
.em-post-card__title a { color: var(--em-text); }
.em-post-card__title a:hover { color: var(--em-primary); }
.em-post-card__excerpt { color: var(--em-text-soft); font-size: .95rem; flex: 1; }
.em-blog__cta { text-align: center; }

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

.em-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap; }
.em-pagination a, .em-pagination span {
    padding: .625rem 1rem;
    border-radius: var(--em-radius-sm);
    background: #fff;
    border: 1px solid var(--em-border);
    color: var(--em-text-soft);
    font-weight: 500;
    min-width: 44px;
    text-align: center;
}
.em-pagination .current { background: var(--em-primary); border-color: var(--em-primary); color: var(--em-on-primary); }
.em-pagination a:hover { border-color: var(--em-primary); color: var(--em-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. */
.em-blog__empty { text-align: center; padding: 3rem 0; }
.em-blog__empty h3 { margin-bottom: .5rem; }
.em-blog__empty p { color: var(--em-muted); margin-bottom: 1.5rem; }

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

/* ---------- SINGLE POST ---------- */
.em-single { padding: calc(var(--em-header-h) + 3rem) 0 4rem; }
.em-service-single { padding-top: 0; }
.em-single__head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.em-single__cat {
    display: inline-block;
    padding: .375rem 1rem;
    background: var(--em-primary-light);
    color: var(--em-primary);
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.em-single__meta { color: var(--em-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 .em-single__thumb img, mais abaixo. */
.em-single__thumb {
    max-width: 600px;
    margin: 0 auto 30px;
    border-radius: 20px;
    overflow: hidden;
}
.em-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. */
.em-single__thumb figcaption {
    margin-top: .75rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--em-text-muted);
    text-align: center;
}
.em-single__content {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.0625rem;
    line-height: 1.8;
}
.em-single__content h2 { margin: 2.5rem 0 1rem; font-size: 1.75rem; }
.em-single__content h3 { margin: 2rem 0 .75rem; font-size: 1.375rem; }
.em-single__content p { margin-bottom: 1.25rem; color: var(--em-text); }
.em-single__content img { border-radius: var(--em-radius); margin: 1.5rem 0; }
.em-single__content blockquote {
    border-left: 4px solid var(--em-primary);
    padding: .5rem 0 .5rem 1.5rem;
    margin: 1.75rem 0;
    color: var(--em-text-soft);
    font-style: italic;
    font-size: 1.125rem;
}
.em-single__content ul, .em-single__content ol { margin-bottom: 1.25rem; }
.em-single__content li { margin-bottom: .5rem; }
.em-single__content a { font-weight: 600; border-bottom: 1px solid currentColor; }
.em-service-hero {
    position: relative;
    padding: calc(var(--em-header-h) + 3rem) 0 4rem;
    background: linear-gradient(148deg, var(--em-primary-deeper) 0%, var(--em-primary) 60%, var(--em-primary-soft) 100%);
    color: var(--em-on-primary);
    margin-bottom: 3rem;
}
.em-service-hero > * { position: relative; z-index: 1; }
.em-service-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.em-service-hero__content { max-width: 760px; }
.em-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;
}
.em-service-hero__cat:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.em-service-hero__icon {
    display: flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    border-radius: var(--em-radius);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 2rem;
    margin-bottom: 1rem;
}
.em-service-hero h1 {
    color: #fff;
    max-width: 860px;
    margin-bottom: 1rem;
}
.em-service-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, .82);
    font-size: 1.12rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.em-service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}
.em-service-hero__panel {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--em-radius-lg);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}
.em-service-hero__panel h2 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.em-service-hero__panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.em-service-hero__panel li {
    position: relative;
    padding-left: 1.4rem;
    color: rgba(255, 255, 255, .82);
    margin-bottom: .85rem;
}
.em-service-hero__panel li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--em-brand-on-dark);
}
.em-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. */
.em-services-archive__list { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.em-services-archive__hero {
    position: relative;
    padding: calc(var(--em-header-h) + 3rem) 0 3rem;
    background: linear-gradient(148deg, var(--em-primary-deeper) 0%, var(--em-primary) 60%, var(--em-primary-soft) 100%);
    color: var(--em-on-primary);
    margin-bottom: 3rem;
}
.em-services-archive__hero > * { position: relative; z-index: 1; }
.em-services-archive__hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}
.em-services-archive__hero h1 { color: #fff; }
.em-services-archive__hero h1 {
    max-width: 900px;
    margin-bottom: 1rem;
}
.em-services-archive__hero p {
    max-width: 760px;
    color: rgba(255, 255, 255, .8);
    font-size: 1.08rem;
}
.em-related-services {
    max-width: 1100px;
    margin: 3rem auto 0;
}
.em-related-services > h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.em-single__cta {
    position: relative;
    max-width: 760px;
    margin: 2.5rem auto;
    padding: 2.5rem 2.25rem 2.25rem;
    background: var(--em-primary);
    color: var(--em-on-primary);
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
}
.em-single__cta::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--em-brand);
}
.em-single__cta h2 { color: #fff; margin-bottom: .5rem; }
.em-single__cta p { color: rgba(255, 255, 255, .9); margin-bottom: 1.5rem; }

/* ---------- ABOUT PAGE ---------- */
.em-page-hero {
    position: relative;
    padding: calc(var(--em-header-h) + 3rem) 0 4rem;
    background: linear-gradient(148deg, var(--em-primary-deeper) 0%, var(--em-primary) 60%, var(--em-primary-soft) 100%);
    color: var(--em-on-primary);
}
.em-page-hero > * { position: relative; z-index: 1; }
.em-page-hero::after,
.em-service-hero::after,
.em-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
    );
}
.em-page-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.em-page-hero__content {
    max-width: 760px;
}
.em-page-hero--no-media .em-page-hero__content {
    max-width: 860px;
}
.em-page-hero h1 {
    color: #fff;
    margin-bottom: 1rem;
}
.em-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
 * `em-page-hero__actions` deixava o botão encostado na margem esquerda
 * embaixo de um título centralizado.
 */
.em-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
    margin-top: 1.75rem;
}

.em-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: 1.75rem;
}
.em-page-hero__media {
    margin: 0;
    border-radius: var(--em-radius-lg);
    overflow: hidden;
    box-shadow: var(--em-shadow-lg);
    aspect-ratio: 4 / 3;
}
.em-page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.em-about-page__content {
    max-width: 820px;
    margin: 0 auto;
}
.em-about-page__figure {
    margin: 2rem 0 0;
    border-radius: var(--em-radius-lg);
    overflow: hidden;
    box-shadow: var(--em-shadow);
}
.em-about-page__figure img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
}
.em-mvv-grid,
.em-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.em-mvv-card,
.em-team-card {
    background: #fff;
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    overflow: hidden;
    transition: transform .25s var(--em-ease), box-shadow .25s var(--em-ease), border-color .25s var(--em-ease);
}
.em-mvv-card:hover,
.em-team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--em-shadow);
    border-color: var(--em-primary-light);
}
.em-mvv-card {
    padding: 2rem;
}
.em-mvv-card__icon {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--em-brand-tint);
    border: 1px solid color-mix(in srgb, var(--em-brand) 40%, transparent);
    color: var(--em-brand-on-light);
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
}
.em-mvv-card h3 {
    font-size: 1.25rem;
    margin-bottom: .65rem;
}
.em-mvv-card__text p:last-child {
    margin-bottom: 0;
}
.em-about-page__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto;
}
.em-practice-areas {
    overflow: hidden;
}
.em-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);
}
.em-practice-carousel__track {
    display: flex;
    width: max-content;
    /* Sem recuo lateral: quem dá a margem agora é o .em-container em volta.
       O vertical existe para não cortar a sombra dos cartões. */
    padding: .5rem 0 1rem;
    gap: 1rem;
    animation: emPracticeScroll var(--em-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 emPracticeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--em-practice-distance, 50%) * -1)); }
}
.em-practice-carousel:hover .em-practice-carousel__track,
.em-practice-carousel:focus-within .em-practice-carousel__track {
    animation-play-state: paused;
}
.em-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(--em-border);
    border-radius: var(--em-radius);
    box-shadow: var(--em-shadow-sm);
}
.em-practice-card__icon {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--em-radius-sm);
    background: var(--em-primary-light);
    color: var(--em-primary);
    font-size: 1.55rem;
}
.em-practice-card h3 {
    font-size: 1rem;
    margin: 0;
    line-height: 1.25;
}
.em-team-card__photo {
    margin: 0;
    aspect-ratio: 4 / 3;
    background: #EEF0F6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.em-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.em-team-card__photo span {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--em-primary);
    color: var(--em-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}
.em-team-card__body {
    padding: 1.5rem;
}
.em-team-card h3 {
    font-size: 1.2rem;
    margin-bottom: .35rem;
}
.em-team-card__role {
    color: var(--em-primary);
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: .75rem;
}
.em-team-card__bio p {
    font-size: .95rem;
    margin-bottom: 1rem;
}
.em-team-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .9rem;
    font-weight: 700;
}
.em-about-page__cta-section {
    padding-top: 0;
}
.em-about-page__cta {
    margin-bottom: 0;
}

/* ---------- FAQ (single service) ---------- */
.em-service-faq {
    max-width: 760px;
    margin: 3rem auto 0;
}
.em-service-faq > h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.em-faq {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}
.em-faq__item {
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    background: var(--em-bg);
    transition: border-color .3s var(--em-ease), box-shadow .3s var(--em-ease);
}
.em-faq__item.is-open {
    border-color: var(--em-primary);
    box-shadow: var(--em-shadow);
}
.em-faq__heading {
    margin: 0;
    font-size: inherit;
}
.em-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(--em-text);
    transition: color .25s var(--em-ease);
}
.em-faq__trigger:hover { color: var(--em-primary); }
.em-faq__trigger:focus-visible {
    outline: 2px solid var(--em-primary);
    outline-offset: -2px;
    border-radius: var(--em-radius);
}
.em-faq__icon {
    flex-shrink: 0;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--em-primary-light);
    color: var(--em-primary);
    transition: transform .35s var(--em-ease), background .25s var(--em-ease);
}
.em-faq__item.is-open .em-faq__icon {
    transform: rotate(-180deg);
    background: var(--em-primary);
    color: var(--em-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) {
    .em-faq__panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .35s var(--em-ease);
    }

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

@media (prefers-reduced-motion: reduce) {
    .em-faq__panel,
    .em-faq__answer,
    .em-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. */
    .em-practice-carousel__track { animation: none; }
    .em-practice-carousel {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }
}

/* ---------- FLOATING WHATSAPP ---------- */
.em-wa-float {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 90;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: var(--em-accent);
    color: var(--em-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px var(--em-accent-shadow-strong);
    transition: transform .25s var(--em-ease), box-shadow .25s var(--em-ease);
    animation: emPulse 2.4s var(--em-ease) infinite;
}
.em-wa-float:hover { transform: scale(1.08); color: #fff; box-shadow: 0 16px 36px var(--em-accent-glow); }
.em-wa-float svg { width: 30px; height: 30px; }

/* ---------- FOOTER ---------- */
.em-footer {
    position: relative;
    background: var(--em-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(--em-brand);
}
.em-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}
.em-footer__brand p { color: rgba(255, 255, 255, .65); max-width: 360px; margin-top: 1.25rem; }
.em-footer__wa { margin-top: .25rem; }
.em-footer__col h2 {
    color: #fff;
    font-family: var(--em-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. */
.em-footer__col h2::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 2px;
    background: var(--em-brand);
}
.em-footer__col ul { list-style: none; padding: 0; margin: 0; }
.em-footer__col li { margin-bottom: .625rem; }
.em-footer__col a { color: rgba(255, 255, 255, .7); font-size: .95rem; }
.em-footer__col a:hover { color: var(--em-brand-on-dark); }

/* Bloco de endereço/telefone/e-mail/horário */
.em-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);
}
.em-footer__nap-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: .15rem;
    color: var(--em-brand);
}
.em-footer__nap-icon svg { width: 100%; height: 100%; display: block; }

.em-footer__social { display: flex; gap: .75rem; margin-top: 1.5rem; }
.em-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(--em-ease), transform .2s var(--em-ease);
}
/* Dourado no hover: a primária é o próprio marinho do rodapé */
.em-footer__social a:hover { background: var(--em-brand); transform: translateY(-3px); color: var(--em-primary); }
.em-footer__social svg { width: 18px; height: 18px; }
.em-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);
}
.em-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. */
.em-footer__cnpj,
.em-footer__registry { color: rgba(255, 255, 255, .62); }

/* O link legal não tinha cor própria e caía no `a { color: var(--em-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é. */
.em-footer__legal a { color: rgba(255, 255, 255, .7); }
.em-footer__legal a:hover { color: var(--em-brand-on-dark); }
.em-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;
}
.em-footer__credit-link:hover { color: #fff; }
.em-cnw-mark { display: inline-flex; width: 30px; height: 30px; flex: 0 0 auto; }
.em-cnw-mark svg { width: 100%; height: 100%; display: block; }
.em-cnw-mark__tilt {
    transform-box: fill-box;
    transform-origin: center;
    transform: rotate(-10deg);
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.em-footer__credit-link:hover .em-cnw-mark__tilt { transform: rotate(0deg); }
.em-cnw-text strong { font-weight: 700; }

/* ---------- ANIMATIONS ---------- */
@keyframes emFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes emPulse {
    0%, 100% { box-shadow: 0 12px 30px var(--em-accent-shadow-strong), 0 0 0 0 var(--em-accent-glow); }
    50%      { box-shadow: 0 12px 30px var(--em-accent-shadow-strong), 0 0 0 14px transparent; }
}
@keyframes emMarquee {
    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) {
    .em-services__grid { grid-template-columns: repeat(2, 1fr); }
    .em-blog__grid { grid-template-columns: repeat(2, 1fr); }
    .em-testimonials__track { grid-auto-columns: calc(50% - .75rem); }
    /* Tablet: marca ocupa a linha inteira e as três listas se dividem embaixo */
    .em-footer__grid { grid-template-columns: repeat(3, 1fr); }
    .em-footer__brand { grid-column: 1 / -1; }
    .em-mvv-grid,
    .em-team-grid { grid-template-columns: repeat(2, 1fr); }
    .em-practice-card { flex-basis: 250px; }
    .em-services-archive__hero-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .em-services-archive__hero .em-btn { flex-shrink: 0; }
}
@media (min-width: 960px) {
    .em-nav { display: block; }
    .em-header__cta { display: inline-flex; }
    .em-burger { display: none; }

    /* ---------- Submenu do topo (Aparência > Menus, um nível) ---------- */
    .em-nav li { position: relative; }
    /* Seta do item com filhos. O ::after do link já é o sublinhado. */
    .em-nav .menu-item-has-children > a { padding-right: 15px; }
    .em-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. */
    .em-nav .menu-item-has-children::after {
        content: '';
        position: absolute;
        left: 0; right: 0; top: 100%;
        height: 16px;
    }
    .em-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(--em-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(--em-ease), transform .2s var(--em-ease), visibility .2s;
    }
    .em-nav li:hover > .sub-menu,
    .em-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. */
    .em-nav .sub-menu a,
    .em-header.is-scrolled .em-nav .sub-menu a,
    .em-header.is-inner .em-nav .sub-menu a {
        display: block;
        padding: .6rem 1.25rem;
        color: var(--em-text-soft);
        font-size: .925rem;
        line-height: 1.35;
    }
    .em-nav .sub-menu a:hover,
    .em-nav .sub-menu a.is-active,
    .em-header.is-scrolled .em-nav .sub-menu a:hover,
    .em-header.is-inner .em-nav .sub-menu a:hover { color: var(--em-primary); background: var(--em-bg-alt); }
    .em-nav .sub-menu a::after { display: none; }
    /* Duas colunas somente com imagem lateral (regra em .em-hero__visual) */
    .em-hero__inner { gap: 4rem; }
    .em-about__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
    .em-services__grid { grid-template-columns: repeat(3, 1fr); }
    .em-page-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 4rem; }
    .em-page-hero--no-media .em-page-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .em-mvv-grid,
    .em-team-grid { grid-template-columns: repeat(3, 1fr); }
    .em-practice-card { flex-basis: 280px; }
    .em-testimonials__track { grid-auto-columns: calc(33.333% - 1rem); }
    .em-blog__grid { grid-template-columns: repeat(3, 1fr); }
    .em-contact__grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
    .em-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. */
    .em-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 3rem 2.5rem; }
    .em-footer__brand { grid-column: auto; }
    .em-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
    .em-footer__legal { flex-direction: row; gap: 1.25rem; }
}
@media (min-width: 1100px) {
    :root { --em-gutter: 2rem; }
}

/* Aqui existia uma regra `img.attachment-full.size-full.wp-post-image` que
   centralizava e limitava a imagem destacada a 600px. O seletor dependia do
   nome do tamanho da imagem: ao trocar `full` por `em-content` nos templates,
   a classe virou `attachment-em-content` e a regra parou de casar — a imagem
   do post foi para a largura toda, alinhada à esquerda. O mesmo visual agora
   mora em .em-single__thumb, que depende da estrutura do template e não do
   tamanho registrado. */

/* ==========================================================================
   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.
   ========================================================================== */
.em-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--em-text-muted);
}
.em-crumbs a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.em-crumbs a:hover,
.em-crumbs a:focus-visible { border-bottom-color: currentColor; }
.em-crumbs [aria-current="page"] { color: var(--em-text); font-weight: 500; }
.em-crumbs__sep { opacity: .55; }

/* Yoast monta a trilha como texto corrido com <span> entre os links. */
.em-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. */
.em-crumbs:not(.em-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. */
.em-crumbs:has(+ .em-archive),
.em-crumbs:has(+ .em-single) { padding-top: calc(var(--em-header-h) + 1.5rem); }
.em-crumbs + .em-archive,
.em-crumbs + .em-single { padding-top: 1rem; }

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

/* ==========================================================================
   Avaliações no Google (página de Contato)
   Aparece só quando o perfil está cadastrado no Customizer.
   ========================================================================== */
.em-reviews__inner {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.em-reviews__stars {
    display: flex;
    justify-content: center;
    gap: .25rem;
    margin-bottom: 1rem;
    color: var(--em-brand);
}
.em-reviews__stars svg { width: 22px; height: 22px; }
.em-reviews h2 { margin-bottom: .75rem; }
.em-reviews p { margin-bottom: 1.75rem; }
.em-reviews__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}
.em-reviews__actions .em-btn svg { width: 18px; height: 18px; }
/* Sobre a faixa cinza, o --em-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. */
.em-reviews__actions .em-btn--ghost {
    background: #fff;
    border-color: rgba(13, 27, 42, .55);
}
.em-reviews__actions .em-btn--ghost:hover {
    background: #fff;
    border-color: var(--em-primary);
    color: var(--em-primary);
}

/* Ícone do Google no rodapé: o círculo dos outros ícones já dá o contraste. */
.em-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. */
.em-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

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

.em-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. */
.em-consent {
    position: fixed;
    left: var(--em-gutter);
    right: var(--em-gutter);
    bottom: var(--em-gutter);
    z-index: 120;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--em-bg);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    box-shadow: var(--em-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. */
.em-consent[hidden] { display: none; }

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

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

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

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

@media (min-width: 720px) {
    .em-consent { flex-direction: row; align-items: center; justify-content: space-between; }
    .em-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. */
.em-form__consent { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: 1.125rem; }

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

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

/* Chapéu sobre fundo escuro (hero). No tema original isto era style inline
   no HTML; como classe, o token da paleta continua mandando na cor. */
.em-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-em-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-em-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--em-ease), transform .6s var(--em-ease); }
    [data-em-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.em-testimonial { margin: 0; }
.em-testimonial blockquote,
.em-testimonial figcaption { margin: 0; }