/*
 * Escale Mais UI — linguagem visual da home do ERP (erp.escalemais.com),
 * extraída para os sites da Escale Mais seguirem o mesmo padrão.
 *
 * Fonte da verdade: erp.escalemais/resources/views/home.blade.php,
 * layouts/navigation.blade.php, layouts/footer.blade.php e partials/guias.
 * Mudou lá? Atualize aqui e copie para os outros projetos — o arquivo é o
 * mesmo em todos (es, en, escalemais, erpescalemais, cliente, chamado).
 *
 * CSS puro de propósito: metade dos sites não tem build (escalemais, cliente,
 * chamado) e os que têm usam Tailwind 3 e 4. Assim a mesma folha vale em todos.
 * O comportamento (menu, sombra da barra, entrada no scroll, FAQ) fica em
 * escalemais-ui.js.
 */

/* ---------- Tokens ---------- */
:root {
    --em-bg: #f0f0f0;
    --em-navy: #00002d;
    --em-blue: #004cff;
    --em-blue-hover: #0039cc;
    --em-white: #ffffff;
    --em-ink-80: rgb(0 0 45 / 0.8);
    --em-ink-70: rgb(0 0 45 / 0.7);
    --em-ink-65: rgb(0 0 45 / 0.65);
    --em-ink-60: rgb(0 0 45 / 0.6);
    --em-ink-55: rgb(0 0 45 / 0.55);
    --em-line: rgb(0 0 45 / 0.1);
    --em-line-soft: rgb(0 0 45 / 0.05);
    --em-font: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --em-font-brand: 'Poppins', 'SF Pro Display', system-ui, sans-serif;
    /* Cor atrás dos cantos arredondados do rodapé: a da seção de cima. */
    --footer-faixa: var(--em-bg);
}

/* ---------- Fontes ----------
   Os caminhos são absolutos (/sf-pro-display, /fonts/poppins): cada projeto
   serve as fontes na raiz pública. */
@font-face { font-family: 'SF Pro Display'; src: url('/sf-pro-display/SFPRODISPLAYREGULAR.OTF') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('/sf-pro-display/SFPRODISPLAYMEDIUM.OTF') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('/sf-pro-display/SFPRODISPLAYBOLD.OTF') format('opentype'); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins/poppins-300-latin.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins/poppins-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.em-body {
    margin: 0;
    background: var(--em-bg);
    color: var(--em-navy);
    font-family: var(--em-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
.em-body *, .em-body *::before, .em-body *::after { box-sizing: border-box; }
.em-body img, .em-body svg { max-width: 100%; }
.em-body ::selection { background: rgb(0 76 255 / 0.18); }
.em-body a:focus-visible,
.em-body button:focus-visible { outline: 2px solid var(--em-blue); outline-offset: 3px; }

.em-skip {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    padding: .5rem 1rem; border-radius: .75rem;
    background: var(--em-blue); color: #fff; font-weight: 600; text-decoration: none;
}
.em-skip:focus { top: 1rem; }

.em-container { max-width: 80rem; margin: 0 auto; }
.em-container--lg { max-width: 72rem; margin: 0 auto; }
.em-container--md { max-width: 56rem; margin: 0 auto; }
.em-container--sm { max-width: 48rem; margin: 0 auto; }

/* ---------- Lockup da marca ---------- */
.brand-lockup { display: flex; align-items: center; gap: .5rem; text-decoration: none; transition: opacity .2s; }
.brand-lockup:hover { opacity: .8; }
.brand-lockup img { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.brand-wordmark {
    display: block; margin: 0;
    font-family: var(--em-font-brand); font-weight: 600; font-size: 1.125rem;
    letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; color: var(--em-navy);
}
.brand-tagline {
    display: block; margin: 0;
    font-family: var(--em-font-brand); font-weight: 300; font-size: 9px;
    letter-spacing: 0.16em; line-height: 1.15; white-space: nowrap; color: var(--em-ink-60);
}
.em-footer .brand-lockup img { width: 2.5rem; height: 2.5rem; }
.em-footer .brand-wordmark { font-size: 1.25rem; color: #f4f4f5; }
.em-footer .brand-tagline { font-size: 10px; color: rgb(244 244 245 / 0.7); }

/* ---------- Navbar ---------- */
.em-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.em-nav-shell {
    position: relative;
    background: var(--em-bg);
    border-bottom: 1px solid var(--em-line);
    padding-top: env(safe-area-inset-top, 0px);
    transition: box-shadow .3s;
}
.em-nav.is-scrolled .em-nav-shell { box-shadow: 0 10px 30px -12px rgb(0 0 45 / 0.18); }
.em-nav-inner {
    position: relative;
    max-width: 80rem; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .75rem 1rem;
}
@media (min-width: 640px) { .em-nav-inner { padding: .75rem 1.5rem; } }
.em-nav-side { display: flex; align-items: center; min-width: 0; }
.em-nav-side--end { justify-content: flex-end; gap: .25rem; }
@media (min-width: 1024px) { .em-nav-side { flex: 1 1 0; } }
.em-nav-links { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .em-nav-links { display: flex; } }

.nav-link {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .5rem .875rem; border-radius: 9999px;
    font-size: .875rem; font-weight: 600; line-height: 1.25rem;
    color: var(--em-ink-70); text-decoration: none; white-space: nowrap;
    background: transparent; border: 0; cursor: pointer; font-family: inherit;
    transition: color .2s, background-color .2s;
}
.nav-link.active-link, .nav-link[aria-current="page"] { color: var(--em-navy); background-color: rgb(0 0 45 / 0.06); }
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--em-navy); background-color: rgb(0 0 45 / 0.04); }
}

/* Dropdown do menu (ex.: Serviços) */
.em-dropdown { position: relative; }
.em-dropdown-panel {
    position: absolute; top: calc(100% + .75rem); left: 50%; transform: translateX(-50%);
    min-width: 15rem; padding: .375rem;
    background: #fff; border: 1px solid var(--em-line); border-radius: 1rem;
    box-shadow: 0 20px 40px -12px rgb(0 0 45 / 0.2);
    display: none; z-index: 70;
}
.em-dropdown.is-open .em-dropdown-panel { display: block; }
.em-dropdown-panel--wide { min-width: 34rem; display: none; grid-template-columns: 1fr 1fr; gap: .125rem; }
.em-dropdown.is-open .em-dropdown-panel--wide { display: grid; }
.em-dropdown-item {
    display: block; padding: .5rem .75rem; border-radius: .75rem;
    font-size: .875rem; color: var(--em-navy); text-decoration: none;
    transition: background-color .2s, color .2s;
}
.em-dropdown-item:hover { background: rgb(0 0 45 / 0.05); }
.em-dropdown-item small { display: block; font-size: .75rem; color: var(--em-ink-60); margin-top: .125rem; }
.em-chevron { width: .875rem; height: .875rem; transition: transform .2s; }
.em-dropdown.is-open .em-chevron { transform: rotate(180deg); }

/* Seletor de idioma (PT · EN · ES) */
.em-lang {
    display: inline-flex; align-items: center; gap: .125rem; padding: .1875rem;
    background: #fff; border: 1px solid var(--em-line); border-radius: 9999px;
}
.em-lang a {
    padding: .25rem .5rem; border-radius: 9999px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .02em;
    color: var(--em-ink-60); text-decoration: none; transition: color .2s, background-color .2s;
}
.em-lang a:hover { color: var(--em-navy); }
.em-lang a[aria-current="true"] { background: var(--em-navy); color: #fff; }

/* Botão do menu no celular */
.em-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    background: #fff; border: 1px solid var(--em-line); color: var(--em-navy); cursor: pointer;
}
.em-menu-btn svg { width: 1.25rem; height: 1.25rem; }
.em-menu-btn .em-icon-close { display: none; }
.em-menu-btn[aria-expanded="true"] .em-icon-open { display: none; }
.em-menu-btn[aria-expanded="true"] .em-icon-close { display: block; }
@media (min-width: 1024px) { .em-menu-btn { display: none; } }

.em-mobile-menu {
    display: none;
    max-height: calc(100vh - 4rem); overflow-y: auto;
    border-top: 1px solid var(--em-line);
    padding: .75rem 1rem 1.25rem;
}
.em-mobile-menu.is-open { display: block; }
@media (min-width: 1024px) { .em-mobile-menu, .em-mobile-menu.is-open { display: none; } }
.em-mobile-link {
    display: block; padding: .75rem 1rem; border-radius: .75rem;
    font-size: 1rem; font-weight: 600; color: var(--em-navy); text-decoration: none;
}
.em-mobile-link:hover { background: rgb(0 0 45 / 0.05); }
.em-mobile-label {
    display: block; padding: .75rem 1rem .25rem;
    font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--em-ink-55);
}
.em-mobile-actions { display: grid; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--em-line); }

/* Utilitários de visibilidade (não dependem do Tailwind) */
.em-only-desktop { display: none !important; }
@media (min-width: 768px) { .em-only-desktop { display: inline-flex !important; } }
@media (min-width: 768px) { .em-only-mobile { display: none !important; } }

/* ---------- Botões ---------- */
.em-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .875rem 1.75rem; border-radius: 9999px;
    font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5rem;
    text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
    transition: background-color .2s, border-color .2s, color .2s;
}
.em-btn svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; transition: transform .2s; }
.em-btn:hover svg.em-arrow { transform: translateX(2px); }
.em-btn--primary { background: var(--em-blue); color: #fff; box-shadow: 0 10px 15px -3px rgb(0 76 255 / 0.25), 0 4px 6px -4px rgb(0 76 255 / 0.25); }
.em-btn--primary:hover { background: var(--em-blue-hover); }
.em-btn--secondary { background: #fff; color: var(--em-navy); border-color: var(--em-line); }
.em-btn--secondary:hover { border-color: rgb(0 0 45 / 0.25); }
.em-btn--dark { background: var(--em-navy); color: #fff; }
.em-btn--dark:hover { background: var(--em-blue); }
.em-btn--ghost { background: transparent; color: var(--em-ink-80); }
.em-btn--ghost:hover { color: var(--em-navy); background: rgb(0 0 45 / 0.05); }
.em-btn--whatsapp { background: #25d366; color: #fff; box-shadow: 0 10px 15px -3px rgb(37 211 102 / 0.25); }
.em-btn--whatsapp:hover { background: #1fae54; }
.em-btn--sm { padding: .625rem 1.25rem; font-size: .875rem; line-height: 1.25rem; }
.em-btn--sm svg { width: 1rem; height: 1rem; }
.em-btn--lg { padding: 1rem 2rem; font-size: 1.125rem; }
.em-btn--block { width: 100%; }
.em-btn[disabled], .em-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Reflexo que atravessa o botão principal a cada 6s */
.brilho { position: relative; overflow: hidden; isolation: isolate; }
.brilho::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.35) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: brilho-passa 6s ease-in-out 2.5s infinite;
}
@keyframes brilho-passa { 0% { transform: translateX(-100%); } 25%, 100% { transform: translateX(100%); } }

/* ---------- Selos ---------- */
.em-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .375rem .875rem; margin-bottom: 1.25rem;
    background: #fff; border: 1px solid var(--em-line); border-radius: 9999px;
    font-size: .875rem; font-weight: 500; color: var(--em-ink-80);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); text-decoration: none;
}
.em-badge::before { content: ''; width: .375rem; height: .375rem; border-radius: 9999px; background: var(--em-blue); flex-shrink: 0; }
.em-badge--tag::before { display: none; }
.em-badge--tag { padding-left: .375rem; transition: border-color .2s, color .2s; }
.em-badge--tag:hover { border-color: rgb(0 76 255 / 0.4); color: var(--em-navy); }
.em-badge-pill { padding: .125rem .625rem; border-radius: 9999px; background: var(--em-blue); color: #fff; font-size: .75rem; font-weight: 600; }
.em-badge--blue { background: rgb(0 76 255 / 0.1); border-color: transparent; color: var(--em-blue); font-weight: 600; box-shadow: none; }
.em-badge--blue::before { display: none; }
.em-badge--dark { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.85); box-shadow: none; }

.em-chip {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .25rem .75rem; border-radius: 9999px;
    background: rgb(0 76 255 / 0.08); color: var(--em-blue);
    font-size: .75rem; font-weight: 600; text-decoration: none;
}
.em-chip--neutral { background: #fff; border: 1px solid var(--em-line); color: var(--em-ink-70); }

/* ---------- Tipografia ---------- */
.em-h1, .em-h2, .em-h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; color: var(--em-navy); text-wrap: balance; }
.em-h1 { font-size: 2.75rem; line-height: 1.05; }
@media (min-width: 640px) { .em-h1 { font-size: 3.75rem; line-height: 1.05; } }
@media (min-width: 1024px) { .em-h1 { font-size: 4.5rem; line-height: 1.05; } }
.em-h1--sm { font-size: 2.5rem; line-height: 1.08; }
@media (min-width: 640px) { .em-h1--sm { font-size: 3rem; } }
@media (min-width: 1024px) { .em-h1--sm { font-size: 3.75rem; } }
.em-h2 { font-size: 2.25rem; line-height: 1.1; }
@media (min-width: 640px) { .em-h2 { font-size: 3rem; line-height: 1.1; } }
@media (min-width: 1024px) { .em-h2 { font-size: 3.5rem; line-height: 1.1; } }
.em-h2--sm { font-size: 1.875rem; }
@media (min-width: 640px) { .em-h2--sm { font-size: 2.25rem; } }
@media (min-width: 1024px) { .em-h2--sm { font-size: 2.5rem; } }
.em-h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.em-accent { color: var(--em-blue); }
.em-lead { margin: 1.25rem 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--em-ink-70); text-wrap: pretty; }
@media (min-width: 640px) { .em-lead { font-size: 1.125rem; } }
@media (min-width: 768px) { .em-lead--hero { font-size: 1.25rem; } }
.em-lead strong { color: var(--em-navy); font-weight: 600; }
.em-muted { color: var(--em-ink-60); }
.em-small { font-size: .875rem; color: var(--em-ink-55); }
.em-center { text-align: center; }
.em-center .em-lead { margin-left: auto; margin-right: auto; }

/* Conteúdo longo (artigos, termos, páginas de serviço) */
.em-prose { font-size: 1.0625rem; line-height: 1.75; color: var(--em-ink-70); }
.em-prose > * + * { margin-top: 1.1em; }
.em-prose h2 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--em-navy); margin-top: 2em; }
.em-prose h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; color: var(--em-navy); margin-top: 1.6em; }
.em-prose strong { color: var(--em-navy); }
.em-prose a { color: var(--em-blue); font-weight: 600; text-decoration: none; }
.em-prose a:hover { text-decoration: underline; }
.em-prose ul, .em-prose ol { padding-left: 1.25rem; }
.em-prose li + li { margin-top: .4em; }

/* ---------- Seções ---------- */
.em-section { position: relative; padding: 5rem 1.5rem; background: var(--em-bg); }
@media (min-width: 640px) { .em-section { padding-top: 7rem; padding-bottom: 7rem; } }
.em-section--tight { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .em-section--tight { padding-top: 5rem; padding-bottom: 5rem; } }
.em-section--flush-top { padding-top: 0 !important; }
.em-section-head { max-width: 48rem; margin: 0 auto 2.5rem; text-align: center; }
@media (min-width: 640px) { .em-section-head { margin-bottom: 3.5rem; } }
.em-section-head--left { margin-left: 0; text-align: left; }

/* Hero: começa abaixo da navbar fixa */
.em-hero {
    position: relative; overflow: hidden;
    padding: calc(8.5rem + env(safe-area-inset-top, 0px)) 1.5rem 4rem;
    background: var(--em-bg);
}
@media (min-width: 640px) { .em-hero { padding-bottom: 5rem; } }
.em-hero--compact { padding-top: calc(7.5rem + env(safe-area-inset-top, 0px)); padding-bottom: 3rem; }
.em-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
.em-hero-actions--left { justify-content: flex-start; }
.em-checks {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .5rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none;
    font-size: .875rem; color: var(--em-ink-60);
}
.em-checks--left { justify-content: flex-start; }
.em-checks li { display: flex; align-items: center; gap: .375rem; }
.em-checks svg { width: 1rem; height: 1rem; color: var(--em-blue); flex-shrink: 0; }

/* Seção escura (a "leadhub" do ERP): navy, sobe 2rem com cantos arredondados */
.em-section--dark {
    background: var(--em-navy); color: #fff;
    margin-top: -2rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem;
    padding-top: 7rem; padding-bottom: 8rem;
}
.em-section--dark + .em-section { margin-top: -2rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem; }
.em-section--dark .em-h2, .em-section--dark .em-h3 { color: #fff; }
.em-section--dark .em-lead { color: rgb(255 255 255 / 0.7); }
.em-section--dark .em-lead strong { color: #fff; }

/* Breadcrumb */
.em-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin: 0 0 1.5rem; padding: 0; list-style: none; font-size: .875rem; color: var(--em-ink-55); }
.em-breadcrumb a { color: var(--em-ink-70); text-decoration: none; }
.em-breadcrumb a:hover { color: var(--em-blue); }
.em-breadcrumb li + li::before { content: '/'; margin-right: .375rem; color: rgb(0 0 45 / 0.3); }
.em-center .em-breadcrumb { justify-content: center; }

/* ---------- Grades e cards ---------- */
.em-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .em-grid { gap: 1rem; } }
@media (min-width: 640px) { .em-grid--2, .em-grid--3, .em-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .em-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .em-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.em-card {
    position: relative; display: block;
    padding: 1rem; background: #fff; color: inherit; text-decoration: none;
    border: 1px solid var(--em-line-soft); border-radius: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
@media (min-width: 640px) { .em-card { padding: 1.5rem; } }
a.em-card:hover, .em-card--hover:hover { border-color: rgb(0 76 255 / 0.3); }
.em-card--lg { border-radius: 1.5rem; }
@media (min-width: 640px) { .em-card--lg { padding: 2rem; } }
.em-card-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--em-navy); }
@media (min-width: 640px) { .em-card-title { font-size: 1.125rem; } }
.em-card-text { margin: .25rem 0 0; font-size: .875rem; line-height: 1.65; color: var(--em-ink-65); }
@media (min-width: 640px) { .em-card-text { margin-top: .5rem; } }
.em-card-text strong { color: var(--em-navy); font-weight: 600; }
.em-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
    border-radius: .875rem; background: rgb(0 76 255 / 0.08); color: var(--em-blue);
    transition: background-color .2s, color .2s;
}
.em-card-icon svg { width: 1.375rem; height: 1.375rem; }
a.em-card:hover .em-card-icon { background: var(--em-blue); color: #fff; }
.em-card-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: 1rem; font-size: .875rem; font-weight: 600; color: var(--em-blue); text-decoration: none; }
.em-card-link svg { width: 1rem; height: 1rem; transition: transform .2s; }
a.em-card:hover .em-card-link svg, .em-card-link:hover svg { transform: translateX(2px); }
.em-card-arrow { position: absolute; top: 1.5rem; right: 1.5rem; width: 1.25rem; height: 1.25rem; color: rgb(0 0 45 / 0.25); transition: color .2s, transform .2s; }
a.em-card:hover .em-card-arrow { color: var(--em-blue); transform: translateX(2px); }
.em-card--dark { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: #fff; }
.em-card--dark .em-card-title, .em-card--dark .em-h3 { color: #fff; }
.em-card--dark .em-card-text { color: rgb(255 255 255 / 0.65); }
a.em-card--dark:hover { border-color: rgb(0 76 255 / 0.6); background: rgb(255 255 255 / 0.08); }
.em-card--dark .em-card-arrow { color: rgb(255 255 255 / 0.3); }
a.em-card--dark:hover .em-card-arrow { color: #fff; }

/* Lista com check azul */
.em-list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.em-list li { display: flex; gap: .5rem; font-size: .875rem; line-height: 1.5; color: var(--em-ink-70); }
.em-list li::before {
    content: ''; flex-shrink: 0; width: 1rem; height: 1rem; margin-top: .125rem;
    background: var(--em-blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.em-list--lg li { font-size: 1rem; }

/* Números (150+, 98%...) */
.em-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 1024px) { .em-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.em-stat { padding: 1.25rem 1.5rem; background: #fff; border: 1px solid var(--em-line-soft); border-radius: 1rem; }
.em-stat-value { display: block; font-size: 2rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--em-navy); font-variant-numeric: tabular-nums; }
.em-stat-label { display: block; margin-top: .25rem; font-size: .875rem; color: var(--em-ink-60); }
.em-stat--blue { background: var(--em-blue); border-color: var(--em-blue); }
.em-stat--blue .em-stat-value, .em-stat--blue .em-stat-label { color: #fff; }

/* Spotlight: brilho azul fraco que segue o cursor (--mx/--my vêm do JS) */
.spot { position: relative; isolation: isolate; }
.spot::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgb(0 76 255 / 0.08), transparent 70%);
    opacity: 0; transition: opacity .3s;
}
@media (hover: hover) { .spot:hover::before { opacity: 1; } }

/* ---------- FAQ ---------- */
.em-faq { display: grid; gap: .75rem; }
.faq-item { background: #fff; border: 1px solid var(--em-line-soft); border-radius: 1rem; transition: border-color .2s, box-shadow .2s; }
.faq-item h3 { margin: 0; }
.faq-botao {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.25rem; text-align: left; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--em-navy);
}
@media (min-width: 640px) { .faq-botao { padding: 1.25rem 1.5rem; font-size: 1.125rem; } }
.faq-icone {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background-color: rgb(0 0 45 / 0.05); color: var(--em-navy);
    transition: transform .3s, background-color .2s, color .2s;
}
.faq-icone svg { width: 1rem; height: 1rem; }
.faq-painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-painel > div { overflow: hidden; visibility: hidden; transition: visibility .3s; }
.faq-painel p { margin: 0; padding: 0 1.25rem 1.5rem; line-height: 1.65; color: var(--em-ink-70); }
@media (min-width: 640px) { .faq-painel p { padding: 0 1.5rem 1.5rem; } }
.faq-item.aberta .faq-painel { grid-template-rows: 1fr; }
.faq-item.aberta .faq-painel > div { visibility: visible; }
.faq-item.aberta { border-color: rgb(0 76 255 / 0.3); box-shadow: 0 1px 2px rgb(0 0 45 / 0.05); }
.faq-item.aberta .faq-icone { background-color: var(--em-blue); color: #fff; transform: rotate(45deg); }
.em-faq-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
    .em-faq-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 4rem; align-items: start; }
    .em-faq-layout .em-section-head { text-align: left; margin: 0; }
}

/* ---------- Formulários ---------- */
.em-field { display: grid; gap: .375rem; }
.em-label { font-size: .875rem; font-weight: 600; color: var(--em-navy); }
.em-label .em-req { color: var(--em-blue); }
.em-input, .em-select, .em-textarea {
    width: 100%; padding: .75rem 1rem;
    background: #fff; color: var(--em-navy);
    border: 1px solid var(--em-line); border-radius: .875rem;
    font-family: inherit; font-size: 1rem; line-height: 1.5;
    transition: border-color .2s, box-shadow .2s;
}
.em-input::placeholder, .em-textarea::placeholder { color: rgb(0 0 45 / 0.4); }
.em-input:focus, .em-select:focus, .em-textarea:focus { outline: none; border-color: var(--em-blue); box-shadow: 0 0 0 4px rgb(0 76 255 / 0.12); }
.em-textarea { min-height: 8rem; resize: vertical; }
.em-select {
    -webkit-appearance: none; appearance: none; padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300002d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .875rem center; background-size: 1rem;
}
.em-alert { padding: .875rem 1rem; border-radius: .875rem; font-size: .9375rem; line-height: 1.5; border: 1px solid; }
.em-alert--ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.em-alert--erro { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.em-alert--info { background: rgb(0 76 255 / 0.06); border-color: rgb(0 76 255 / 0.2); color: var(--em-navy); }

/* ---------- CTA final ---------- */
.em-cta { text-align: center; }
.em-cta .em-badge { background: rgb(0 76 255 / 0.1); border-color: transparent; color: var(--em-blue); font-weight: 600; box-shadow: none; }
.em-cta .em-badge::before { display: none; }

/* ---------- Rodapé ---------- */
.em-footer {
    position: relative; isolation: isolate;
    padding: 3rem 1.5rem; margin-top: -2rem;
    background: var(--em-navy); color: #f4f4f5;
    border-top-left-radius: 2rem; border-top-right-radius: 2rem;
}
.em-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2rem; z-index: -1;
    background: var(--footer-faixa);
}
.em-footer::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--em-navy); border-radius: inherit;
}
.em-footer-grid { display: grid; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .em-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .em-footer-grid--3 { grid-template-columns: 2fr 1fr 1fr; } }
.em-footer-about { margin: 1rem 0; font-size: .875rem; line-height: 1.6; color: rgb(244 244 245 / 0.7); }
.em-footer h4 { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; color: #f4f4f5; }
.em-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.em-footer ul a, .em-footer-link { color: rgb(244 244 245 / 0.7); text-decoration: none; transition: color .2s; }
.em-footer ul a:hover, .em-footer-link:hover { color: #6f9bff; }
.em-social { display: flex; gap: .75rem; }
.em-social a {
    width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center;
    background: rgb(255 255 255 / 0.9); border-radius: 9999px; color: var(--em-blue); transition: background-color .2s;
}
.em-social a:hover { background: #fff; }
.em-social svg { width: 1.25rem; height: 1.25rem; }
.em-footer-bottom {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem;
    padding-top: 2rem; border-top: 1px solid rgb(244 244 245 / 0.2); text-align: center;
}
@media (min-width: 768px) { .em-footer-bottom { flex-direction: row; text-align: left; } }
.em-footer-bottom p { margin: 0; font-size: .875rem; color: rgb(244 244 245 / 0.7); }
.em-footer-legal { margin-top: .25rem !important; font-size: .75rem !important; color: rgb(244 244 245 / 0.5) !important; }
.em-footer-sign { margin: 1.5rem 0 0; text-align: center; font-size: .75rem; color: rgb(244 244 245 / 0.5); }
.em-footer-sign a { font-weight: 600; color: rgb(244 244 245 / 0.8); text-decoration: none; }
.em-footer-sign a:hover { color: #fff; }

/* ---------- Botão flutuante do WhatsApp ---------- */
.em-whatsapp {
    position: fixed; right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
    width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center;
    background: #25d366; color: #fff; border-radius: 9999px; text-decoration: none;
    box-shadow: 0 20px 25px -5px rgb(37 211 102 / 0.3); transition: background-color .2s, transform .2s;
}
.em-whatsapp:hover { background: #1fae54; transform: scale(1.05); }
.em-whatsapp svg { width: 1.75rem; height: 1.75rem; }
.em-whatsapp-tag {
    position: absolute; top: -.5rem; left: -.5rem;
    padding: .125rem .5rem; border-radius: 9999px;
    background: var(--em-blue); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap;
}

/* ---------- Guias laterais ----------
   Duas linhas nas bordas da coluna de 80rem, com hachura no header e
   losangos na borda. Uso: primeiro filho de uma seção relative:
   <div class="guias [--entra --sai --marca]" aria-hidden="true"><div class="guias-col"></div></div>
   Só a partir de 1280px, quando sobra calha fora da coluna. */
.nav-marks, .guias { display: none; }
@media (min-width: 1280px) {
    .nav-marks, .guias { display: block; position: absolute; inset: 0; pointer-events: none; }
    .nav-marks-col, .guias-col {
        position: relative; height: 100%; max-width: 80rem; margin: 0 auto;
        border-left: 1px solid rgb(0 0 45 / 0.1); border-right: 1px solid rgb(0 0 45 / 0.1);
    }
    .nav-marks { background-image: repeating-linear-gradient(135deg, rgb(0 0 45 / 0.07) 0 1px, transparent 1px 10px); }
    .nav-marks-col { background: var(--em-bg); }
    .guias--entra .guias-col {
        -webkit-mask-image: linear-gradient(to bottom, transparent 1rem, #000 10rem);
                mask-image: linear-gradient(to bottom, transparent 1rem, #000 10rem);
    }
    .guias--entra.guias--sai .guias-col {
        -webkit-mask-image: linear-gradient(to bottom, transparent 1rem, #000 10rem, #000 calc(100% - 14rem), transparent calc(100% - 3rem));
                mask-image: linear-gradient(to bottom, transparent 1rem, #000 10rem, #000 calc(100% - 14rem), transparent calc(100% - 3rem));
    }
    .guias--sai .guias-col {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16rem), transparent calc(100% - 5rem));
                mask-image: linear-gradient(to bottom, #000 calc(100% - 16rem), transparent calc(100% - 5rem));
    }
    .nav-marks-dot, .guias--marca::before, .guias--marca::after {
        position: absolute; width: 9px; height: 9px; background: #d6d8e3; border-radius: 1px;
    }
    .nav-marks-dot { bottom: -0.5px; transform: translate(-50%, 50%) rotate(45deg); animation: marca-acende 1.6s ease-out .8s both; }
    .guias--marca::before, .guias--marca::after { content: ''; top: 0; transform: translate(-50%, -50%) rotate(45deg); }
    .guias--marca::before { left: calc(50% - 40rem); }
    .guias--marca::after  { left: calc(50% + 40rem); }
    .guias-col::before, .guias-col::after {
        content: ''; position: absolute; top: 0; width: 1px; height: 10rem;
        background: linear-gradient(to bottom, transparent, rgb(0 76 255 / 0.6), transparent);
        animation: guia-feixe 9s cubic-bezier(.45, 0, .55, 1) infinite;
    }
    .guias-col::before { left: -1px; }
    .guias-col::after  { right: -1px; animation-delay: 4.5s; }
    .is-in > .guias--marca::before, .is-in > .guias--marca::after { animation: marca-acende 1.6s ease-out .15s both; }
}
@keyframes guia-feixe {
    0%        { top: 0; opacity: 0; }
    10%, 45%  { opacity: 1; }
    55%, 100% { top: calc(100% - 10rem); opacity: 0; }
}
@keyframes marca-acende {
    0%, 100% { background: #d6d8e3; box-shadow: 0 0 0 0 rgb(0 76 255 / 0); }
    30%      { background: #004cff; box-shadow: 0 0 0 5px rgb(0 76 255 / 0.15), 0 0 14px rgb(0 76 255 / 0.5); }
}
/* O conteúdo das seções fica por cima das linhas */
.em-section > :not(.guias), .em-hero > :not(.guias) { position: relative; }

/* ---------- Movimento ---------- */
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
.hero-rise { animation: hero-rise .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }

/* Entrada no scroll: [data-revela] entra inteiro, [data-revela-grupo] filho a
   filho. O estado escondido só vale com html.rv, que o JS põe quando há
   IntersectionObserver e movimento liberado — sem JS, tudo aparece de cara. */
@keyframes rv-entra {
    from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}
.rv [data-revela]:not(.is-in), .rv [data-revela-grupo]:not(.is-in) > * { opacity: 0; }
.rv [data-revela].is-in, .rv [data-revela-grupo].is-in > * {
    animation: rv-entra .8s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(min(var(--i, 0), 12) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
    .hero-rise, .brilho::after, .nav-marks-dot { animation: none !important; }
    .brilho::after, .guias-col::before, .guias-col::after { display: none; }
    .faq-painel, .faq-painel > div, .faq-icone { transition: none; }
}

/* Âncoras não param embaixo da navbar fixa */
.em-body [id] { scroll-margin-top: 5rem; }

/* No celular os botões do hero empilham em largura total, como no ERP */
@media (max-width: 639px) {
    .em-hero-actions { flex-direction: column; align-items: stretch; }
    .em-hero-actions > .em-btn { width: 100%; }
}
/* <br class="em-br-sm">: quebra só a partir de 640px */
@media (max-width: 639px) { .em-br-sm { display: none; } }

/* Grade de links curtos (países, cidades, serviços relacionados) */
.em-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .625rem; }
.em-tiles--lg { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.em-tile {
    display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 3.25rem;
    padding: .75rem 1rem; background: #fff; border: 1px solid var(--em-line-soft); border-radius: .875rem;
    font-size: .875rem; font-weight: 600; line-height: 1.3; text-align: center; color: var(--em-navy); text-decoration: none;
    transition: border-color .2s, color .2s;
}
.em-tile:hover { border-color: rgb(0 76 255 / 0.3); color: var(--em-blue); }
.em-tile--left { justify-content: flex-start; text-align: left; }
.em-tile .em-card-icon { width: 2.25rem; height: 2.25rem; margin: 0; flex-shrink: 0; border-radius: .625rem; }
.em-tile .em-card-icon svg { width: 1.125rem; height: 1.125rem; }

/* Passos numerados (processo) */
.em-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: 9999px;
    background: var(--em-navy); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Seletor de idioma sobre o rodapé navy */
.em-footer .em-lang { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.15); }
.em-footer .em-lang a { color: rgb(244 244 245 / 0.7); }
.em-footer .em-lang a:hover { color: #fff; }
.em-footer .em-lang a[aria-current="true"] { background: #fff; color: var(--em-navy); }

/* Tile sobre a faixa navy */
.em-tile--dark { background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.85); }
.em-tile--dark:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(0 76 255 / 0.6); color: #fff; }

/* Duas colunas (texto + grade) a partir de 1024px: <div data-em-split> */
@media (min-width: 1024px) { [data-em-split] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Passos de processo: 5 colunas no desktop */
@media (min-width: 640px) { .em-grid--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .em-grid--steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Erro de validação de campo */
.em-input.is-invalid, .em-select.is-invalid, .em-textarea.is-invalid { border-color: #ef4444; }
.em-error-text { margin: 0; font-size: .75rem; color: #dc2626; }
.em-form { display: grid; gap: 1.25rem; }
.em-form-row { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .em-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { [data-em-split-eq] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }