/* =====================================================================
   LCS ESTRUTURA - DESIGN SYSTEM + MOTION SYSTEM "EMX" v2
   Pagina: /estruturas-metalicas/ (secoes apos o hero)
   Escopo isolado em .emx - nao interfere em header, menu e rodape.

   Conceito: "desenho tecnico em movimento". Linhas de cota, grade de
   prancha e trelicas se formam durante o scroll; fotos reais de obras
   revelam-se como pranchas sendo abertas.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
.emx,.emx-foot,.emx-top{
    /* cor - azul LCS predominante, vermelho so para CTA/destaque */
    --c-navy:#1d3557;        /* institucional */
    --c-ink:#0c182a;         /* navy profundo (mesmo tom do overlay do hero) */
    --c-ink-2:#13233a;
    --c-steel:#457b9d;       /* azul aco - apoio, linhas tecnicas */
    --c-sky:#a9c2da;         /* azul claro sobre navy */
    --c-red:#e63946;         /* CTA e destaques */
    --c-red-d:#c92a37;
    --c-white:#ffffff;
    --c-gray:#f2f4f7;        /* cinza muito claro */
    --c-line:#dde3ea;
    --c-line-dark:rgba(255,255,255,.14);
    --c-text:#22324a;
    --c-muted:#5b6a7d;
    --c-muted-dark:#9fb3c9;

    /* tipografia */
    --f-sans:'Public Sans',Arial,Helvetica,sans-serif;
    --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
    --t-display:clamp(34px,4.2vw,56px);   /* titulos de secao */
    --t-h3:19px;
    --t-lead:clamp(16px,1.25vw,18px);
    --t-body:15px;
    --t-label:12px;                        /* mono, caixa alta */
    --t-num:clamp(40px,4.6vw,64px);        /* indicadores */

    /* espaco (escala 4) */
    --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
    --s-7:48px; --s-8:64px; --s-9:96px; --s-10:clamp(80px,10vw,140px);
    --gutter:clamp(20px,4vw,32px);
    --max:1240px;

    /* forma */
    --r-1:4px; --r-2:8px;
    --shadow-1:0 1px 2px rgba(12,24,42,.06),0 10px 30px rgba(12,24,42,.06);
    --shadow-2:0 2px 6px rgba(12,24,42,.08),0 24px 48px rgba(12,24,42,.14);

    /* movimento */
    --ease-out:cubic-bezier(.16,1,.3,1);   /* entrada (expo out) */
    --ease-io:cubic-bezier(.65,0,.35,1);   /* linhas tecnicas */
    --d-1:.35s; --d-2:.7s; --d-3:1.1s; --d-4:1.6s;

    font-family:var(--f-sans);
    color:var(--c-text);
    font-size:var(--t-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    background:var(--emx-bg,#fff);
    transition:background-color .9s var(--ease-io);
    overflow:hidden;
}
/* neutraliza o reset do tema (* {font-weight:400; border:none}) dentro do escopo */
.emx *,.emx *::before,.emx *::after,.emx-foot *,.emx-foot *::before,.emx-foot *::after{box-sizing:border-box;font-weight:inherit}
.emx h2,.emx h3,.emx p,.emx ul,.emx ol,.emx figure{margin:0;padding:0}
.emx ul,.emx ol{list-style:none}
.emx img{display:block;max-width:100%}
.emx a{text-decoration:none;color:inherit}
.emx strong{font-weight:700}
.emx :focus-visible{outline:2px solid var(--c-red);outline-offset:3px}

/* ---------------------------------------------------------------------
   2. LAYOUT - wrap, secoes e tons (o fundo muda suavemente entre tons)
   --------------------------------------------------------------------- */
.emx-wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);position:relative;z-index:2}
.emx-sec{position:relative;padding-block:var(--s-10)}
/* tons claros sao transparentes: o fundo vem de .emx e anima entre branco e cinza */
.emx-sec[data-tone="white"],.emx-sec[data-tone="gray"]{background:transparent}
/* tom navy: painel que "se abre" ao entrar na tela */
.emx-panel{background:var(--c-ink);color:#dbe4ef;position:relative;overflow:hidden;
    clip-path:inset(0 var(--panel-x,0px) round var(--panel-r,0px));
    transition:clip-path 1.2s var(--ease-out)}
.emx-js .emx-panel{--panel-x:clamp(12px,3vw,40px);--panel-r:20px}
.emx-js .emx-panel.is-open{--panel-x:0px;--panel-r:0px}

/* grade de prancha (fundo tecnico) */
.emx-grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
    background-image:linear-gradient(to right,var(--grid-c,rgba(29,53,87,.07)) 1px,transparent 1px),
                     linear-gradient(to bottom,var(--grid-c,rgba(29,53,87,.07)) 1px,transparent 1px);
    background-size:56px 56px;
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);
            mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 80%);
    opacity:0;transition:opacity 1.6s var(--ease-io)}
.emx-panel .emx-grid-bg{--grid-c:rgba(169,194,218,.08)}
.is-in>.emx-grid-bg,.emx-sec.is-in .emx-grid-bg{opacity:1}

/* guias verticais (colunas de projeto) que crescem de cima para baixo */
.emx-guides{position:absolute;inset:0;pointer-events:none;z-index:0;display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.emx-guides i{border-left:1px solid var(--guide-c,rgba(29,53,87,.06));transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease-io)}
.emx-guides i:last-child{border-right:1px solid var(--guide-c,rgba(29,53,87,.06))}
.emx-panel .emx-guides{--guide-c:rgba(169,194,218,.07)}
.emx-sec.is-in .emx-guides i{transform:scaleY(1)}
.emx-guides i:nth-child(2){transition-delay:.12s}.emx-guides i:nth-child(3){transition-delay:.24s}.emx-guides i:nth-child(4){transition-delay:.36s}

/* ---------------------------------------------------------------------
   3. TIPOGRAFIA
   --------------------------------------------------------------------- */
.emx-label{font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.emx-eyebrow{display:inline-flex;align-items:center;gap:14px;color:var(--c-steel);margin-bottom:var(--s-5)}
.emx-eyebrow::before{content:"";width:32px;height:2px;background:var(--c-red);transform-origin:left;transform:scaleX(var(--eb,1));transition:transform .9s var(--ease-io) .1s}
.emx-js .emx-head:not(.is-in) .emx-eyebrow::before{--eb:0}
.emx-panel .emx-eyebrow,.emx-cta .emx-eyebrow{color:var(--c-sky)}
.emx-title{font-size:var(--t-display);line-height:1.06;font-weight:700;letter-spacing:-.025em;color:var(--c-navy);text-wrap:balance}
.emx-panel .emx-title,.emx-cta .emx-title{color:#fff}
.emx .emx-lead{margin-top:var(--s-5);font-size:var(--t-lead);color:var(--c-muted);max-width:680px}
.emx-panel .emx-lead,.emx-cta .emx-lead{color:#b8c7d8}
.emx h3{font-size:var(--t-h3);line-height:1.3;font-weight:700;color:var(--c-navy)}
.emx-head{max-width:820px;margin-bottom:clamp(44px,5vw,72px)}
.emx-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.emx-head--row>div{max-width:760px;min-width:0}

/* titulo com revelacao mascarada por palavra (JS envolve as palavras) */
.emx-title .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.emx-title .w>span{display:inline-block;transform:translateY(0);transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 55ms)}
.emx-js .emx-head:not(.is-in) .emx-title .w>span{transform:translateY(108%)}

/* ---------------------------------------------------------------------
   4. NUMEROS + LINHA DE COTA (componente de indicador)
   --------------------------------------------------------------------- */
.emx-num{display:flex;align-items:baseline;gap:0;font-size:var(--t-num);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--c-navy);font-variant-numeric:tabular-nums}
.emx-num small{font-size:.36em;font-weight:600;letter-spacing:0;color:var(--c-red);margin-left:4px}
.emx-panel .emx-num{color:#fff}
/* cota: |<------>| desenhada sob o numero */
.emx-cota{position:relative;display:block;height:9px;margin:14px 0 12px;color:var(--c-steel)}
.emx-cota::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor;transform-origin:left;transform:scaleX(var(--k,1));transition:transform 1.2s var(--ease-io) .15s}
.emx-cota::after{content:"";position:absolute;inset:0;border-left:1px solid currentColor;border-right:1px solid currentColor;opacity:var(--ko,1);transition:opacity .4s ease .1s}
.emx-js .emx-stat:not(.is-in) .emx-cota{--k:0;--ko:0}
.emx-panel .emx-cota{color:rgba(169,194,218,.55)}
.emx-stat__lbl{display:block;color:var(--c-muted)}
.emx-panel .emx-stat__lbl{color:var(--c-muted-dark)}

/* ---------------------------------------------------------------------
   5. BOTOES
   --------------------------------------------------------------------- */
.emx-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border-radius:var(--r-1);
    font-family:var(--f-sans);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;cursor:pointer;
    transition:transform var(--d-1) var(--ease-out),box-shadow var(--d-1) var(--ease-out),background-color var(--d-1),color var(--d-1)}
.emx-btn svg:not(.emx-beam__svg){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform var(--d-1) var(--ease-out)}
.emx-btn:hover svg:not(.emx-beam__svg){transform:translateX(4px)}
.emx .emx-btn--red{background:var(--c-red);color:#fff;box-shadow:0 10px 26px rgba(230,57,70,.3)}
.emx-btn--red:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(230,57,70,.38);color:#fff}
/* -- CTA com feixe de luz no contorno (ver secao 5b: .emx-beam) -- */
.emx .emx-btn--ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.emx .emx-btn--ghost:hover{background:#fff;color:var(--c-navy)}
.emx-btn:active{transform:translateY(0) scale(.98)}
.emx .emx-link{display:inline-flex;align-items:center;gap:12px;color:var(--c-navy)}
.emx-link i{display:block;width:20px;height:2px;background:var(--c-red);transition:width var(--d-2) var(--ease-out)}
.emx-link:hover i,.emx-card:hover .emx-link i{width:36px}

/* ---------------------------------------------------------------------
   5b. FEIXE NO CONTORNO (.emx-beam) - "Shimmer Beam" da referencia, refeito
       com SVG: um traco de 1px percorre o contorno inteiro (inclusive os
       cantos arredondados) em velocidade constante. Cabeca luminosa + cauda
       que esmaece. O JS injeta o <svg> e ajusta o retangulo ao botao.
       Desktop: passagem a cada ~8s + voltas continuas no hover.
       Celular: passagem discreta a cada ~13s. So anima com o botao na tela.
       Componente global: vale para qualquer botao com a classe .emx-beam
       (inclusive o CTA do hero, fora do escopo .emx).
   --------------------------------------------------------------------- */
.emx-beam{position:relative;overflow:visible!important;isolation:isolate}
.emx-beam__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.emx-beam__svg rect{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.emx-beam__base{stroke:rgba(255,255,255,.16);stroke-width:1}
.emx-beam__tail{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:42 58;stroke-dashoffset:18;opacity:0}
.emx-beam__trail{stroke:rgba(255,236,236,.6);stroke-width:1;stroke-dasharray:24 76;stroke-dashoffset:0;opacity:0}
.emx-beam__head{stroke:#fff;stroke-width:1.5;stroke-dasharray:4 96;stroke-dashoffset:20;opacity:0;filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,190,190,.7))}

.emx-beam.is-live .emx-beam__tail {animation:emx-bm-tail  var(--beam-cycle,8s) linear var(--beam-delay,1.2s) infinite}
.emx-beam.is-live .emx-beam__trail{animation:emx-bm-trail var(--beam-cycle,8s) linear var(--beam-delay,1.2s) infinite}
.emx-beam.is-live .emx-beam__head {animation:emx-bm-head  var(--beam-cycle,8s) linear var(--beam-delay,1.2s) infinite}
@keyframes emx-bm-tail {0%{stroke-dashoffset:18;opacity:0;animation-timing-function:cubic-bezier(.4,0,.3,1)}3%{opacity:1}20%{opacity:1}23%{stroke-dashoffset:-82;opacity:0}100%{stroke-dashoffset:-82;opacity:0}}
@keyframes emx-bm-trail{0%{stroke-dashoffset:0;opacity:0;animation-timing-function:cubic-bezier(.4,0,.3,1)}3%{opacity:1}20%{opacity:1}23%{stroke-dashoffset:-100;opacity:0}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes emx-bm-head {0%{stroke-dashoffset:20;opacity:0;animation-timing-function:cubic-bezier(.4,0,.3,1)}3%{opacity:1}20%{opacity:1}23%{stroke-dashoffset:-80;opacity:0}100%{stroke-dashoffset:-80;opacity:0}}

/* hover (desktop): voltas continuas e suaves enquanto o cursor esta no botao */
@media (hover:hover) and (pointer:fine){
    .emx-beam:hover .emx-beam__tail {animation:emx-bm-tail-loop  2.4s linear infinite;opacity:1}
    .emx-beam:hover .emx-beam__trail{animation:emx-bm-trail-loop 2.4s linear infinite;opacity:1}
    .emx-beam:hover .emx-beam__head {animation:emx-bm-head-loop  2.4s linear infinite;opacity:1}
}
@keyframes emx-bm-tail-loop {from{stroke-dashoffset:18}to{stroke-dashoffset:-82}}
@keyframes emx-bm-trail-loop{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes emx-bm-head-loop {from{stroke-dashoffset:20}to{stroke-dashoffset:-80}}

/* celular: passagem mais espacada (um pouco mais lenta e suave) */
@media (hover:none),(pointer:coarse){
    .emx-beam{--beam-cycle:13s}
    .emx-beam.is-live .emx-beam__tail {animation-name:emx-bm-tail-m}
    .emx-beam.is-live .emx-beam__trail{animation-name:emx-bm-trail-m}
    .emx-beam.is-live .emx-beam__head {animation-name:emx-bm-head-m}
}
@keyframes emx-bm-tail-m {0%{stroke-dashoffset:18;opacity:0;animation-timing-function:cubic-bezier(.4,0,.3,1)}2%{opacity:.9}15%{opacity:.9}17%{stroke-dashoffset:-82;opacity:0}100%{stroke-dashoffset:-82;opacity:0}}
@keyframes emx-bm-trail-m{0%{stroke-dashoffset:0;opacity:0;animation-timing-function:cubic-bezier(.4,0,.3,1)}2%{opacity:.9}15%{opacity:.9}17%{stroke-dashoffset:-100;opacity:0}100%{stroke-dashoffset:-100;opacity:0}}
@keyframes emx-bm-head-m {0%{stroke-dashoffset:20;opacity:0;animation-timing-function:cubic-bezier(.4,0,.3,1)}2%{opacity:.9}15%{opacity:.9}17%{stroke-dashoffset:-80;opacity:0}100%{stroke-dashoffset:-80;opacity:0}}

/* CTA do hero (classe .btn-primary do tema): mantem o vermelho no hover para o feixe aparecer */
.btn-primary.red.emx-beam:hover{background:#c92a37;color:#fff}

/* ---------------------------------------------------------------------
   6. ICONES (tracado se desenha quando o elemento entra)
   --------------------------------------------------------------------- */
.emx-ico{display:inline-flex;width:52px;height:52px;color:var(--c-navy);flex:none}
.emx-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.emx-ico svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-io) .2s}
.emx-js .emx-draw:not(.is-in) .emx-ico svg [pathLength]{stroke-dashoffset:1}

/* ---------------------------------------------------------------------
   7. CARDS (padrao unico) - spotlight segue o cursor, linha vermelha cresce
   --------------------------------------------------------------------- */
.emx-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-2);padding:34px 28px 30px;box-shadow:var(--shadow-1);overflow:hidden;
    transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s}
.emx-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--c-red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.emx-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
    background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(69,123,157,.10),transparent 60%)}
.emx-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:#c8d3df}
.emx-card:hover::before{transform:scaleX(1)}
.emx-card:hover::after{opacity:1}
.emx-card .emx-ico{margin-bottom:26px;transition:transform .6s var(--ease-out)}
.emx-card:hover .emx-ico{transform:translateY(-3px)}
.emx-card h3{margin-bottom:12px}
.emx-card p{color:var(--c-muted);flex:1}
.emx-card .emx-link{margin-top:24px}
.emx-card__tag{position:absolute;top:30px;right:26px;color:#b3bfcc}
.emx-card--cta{background:var(--c-navy);border-color:var(--c-navy);color:#fff;justify-content:space-between;gap:var(--s-5)}
.emx-card--cta::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(169,194,218,.16),transparent 60%)}
.emx-card--cta h3{color:#fff;font-size:24px;line-height:1.25}
.emx-card--cta .emx-eyebrow{color:var(--c-sky);margin-bottom:var(--s-3)}

/* ---------------------------------------------------------------------
   8. MIDIA - revelacao tipo "prancha abrindo" + parallax sutil
   --------------------------------------------------------------------- */
.emx-media{position:relative;overflow:hidden;border-radius:var(--r-2);background:var(--c-ink)}
/* cortina navy que se recolhe revelando a foto (prancha abrindo) */
.emx-media::before{content:"";position:absolute;inset:0;z-index:3;background:var(--emx-bg,#fff);transform-origin:top;transform:scaleY(0);transition:transform 1.1s var(--ease-io);pointer-events:none}
.emx-js .emx-media:not(.is-in)::before{transform:scaleY(1)}
.emx-js .emx-media:not(.is-in) img{--ms:1.18}
.emx-media img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(var(--ms,1.12));transition:transform 1.6s var(--ease-out)}
.emx-media.is-in img{--ms:1.08}
.emx-media figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;color:#fff}
.emx-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,24,42,0) 45%,rgba(12,24,42,.86) 100%)}

/* ---------------------------------------------------------------------
   9. ENTRADAS GENERICAS (stagger por --i definido no JS)
   --------------------------------------------------------------------- */
.emx-in{transition:opacity var(--d-3) var(--ease-out),transform var(--d-3) var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.emx-js .emx-in:not(.is-in){opacity:0;transform:translate3d(0,28px,0)}

/* ---------------------------------------------------------------------
   10. SECAO: FAIXA DE AUTORIDADE
   --------------------------------------------------------------------- */
.emx-auth{position:relative;padding-block:clamp(48px,6vw,72px);border-bottom:1px solid var(--c-line)}
.emx-auth .emx-wrap{display:grid;grid-template-columns:minmax(240px,.9fr) 2.6fr;gap:var(--s-7);align-items:center}
.emx-auth__lead{font-size:var(--t-lead);font-weight:500;color:var(--c-muted);padding-left:20px;border-left:3px solid var(--c-red)}
.emx-auth__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
.emx-auth__stats .emx-num{font-size:clamp(34px,3.4vw,48px)}
.emx-auth__stats .emx-stat__lbl{font-size:12px}

/* faixa de solucoes - TICKER do Motion System (.emx-ticker)
   Movimento continuo controlado por JS (requestAnimationFrame): velocidade
   constante e lenta, desacelera suavemente no hover, loop sem emenda
   (o JS clona o conjunto ate cobrir a tela). Bordas esmaecidas, regua tecnica
   que corre junto e losangos vermelhos que "respiram". */
.emx-ticker{position:relative;background:var(--c-navy);color:#fff;overflow:hidden;border-block:1px solid rgba(255,255,255,.08);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.emx-ticker__track{display:flex;width:max-content;will-change:transform;transform:translate3d(var(--tx,0px),0,0)}
.emx-ticker__set{display:flex;align-items:stretch;flex:none;margin:0;padding:0;list-style:none;
    /* regua tecnica: marcas finas na base que correm junto com o texto */
    background:repeating-linear-gradient(90deg,rgba(169,194,218,.22) 0 1px,transparent 1px 12px) left bottom/100% 5px no-repeat,
               repeating-linear-gradient(90deg,rgba(169,194,218,.32) 0 1px,transparent 1px 60px) left bottom/100% 9px no-repeat}
.emx-ticker__item{display:flex;align-items:center;gap:30px;padding:22px 0 24px 30px;white-space:nowrap}
.emx-ticker__item a,.emx-ticker__item span.emx-ticker__name{position:relative;display:inline-flex;align-items:baseline;gap:12px;color:rgba(255,255,255,.88);
    font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:color .45s var(--ease-out),opacity .45s var(--ease-out),text-shadow .45s}
.emx-ticker__item small{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--c-sky);opacity:.75}
/* traco vermelho que se desenha sob o item em foco */
.emx-ticker__item a::after,.emx-ticker__item span.emx-ticker__name::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--c-red);
    transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
/* losango separador que respira */
.emx-ticker__sep{position:relative;width:8px;height:8px;border:1.5px solid var(--c-red);transform:rotate(45deg);flex:none;animation:emx-sep 4.8s ease-in-out infinite;animation-delay:calc(var(--k,0) * -.7s)}
@keyframes emx-sep{0%,100%{transform:rotate(45deg) scale(1);box-shadow:0 0 0 0 rgba(230,57,70,0)}50%{transform:rotate(45deg) scale(.82);box-shadow:0 0 10px 1px rgba(230,57,70,.35)}}
/* foco: o item destacado acende, os demais recuam */
.emx-ticker.is-hover .emx-ticker__item a,.emx-ticker.is-hover .emx-ticker__item span.emx-ticker__name{opacity:.5}
.emx-ticker .emx-ticker__item:hover a,.emx-ticker .emx-ticker__item:hover span.emx-ticker__name,
.emx-ticker .emx-ticker__item a:focus-visible{opacity:1;color:#fff;text-shadow:0 0 18px rgba(169,194,218,.45)}
.emx-ticker .emx-ticker__item:hover a::after,.emx-ticker .emx-ticker__item:hover span.emx-ticker__name::after,.emx-ticker .emx-ticker__item a:focus-visible::after{transform:scaleX(1)}
.emx-ticker .emx-ticker__item:hover .emx-ticker__sep{border-color:#ff6b75}

/* ---------------------------------------------------------------------
   11. SECAO: SOLUCOES
   --------------------------------------------------------------------- */
.emx-sol__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}

/* ---------------------------------------------------------------------
   12. SECAO: PROCESSO - linha de fluxo desenhada pelo scroll
   --------------------------------------------------------------------- */
.emx-flow{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-5)}
.emx-flow__rail{position:absolute;left:28px;right:28px;top:28px;height:2px;background:var(--c-line);z-index:0}
.emx-flow__rail b{position:absolute;inset:0;background:linear-gradient(90deg,var(--c-steel),var(--c-navy));transform-origin:left;transform:scaleX(var(--p,0))}
.emx-step{position:relative;z-index:1}
.emx-step__n{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--c-line);color:var(--c-navy);
    transition:background-color .5s var(--ease-out),color .5s,border-color .5s,box-shadow .5s,transform .5s var(--ease-out)}
.emx-step.is-on .emx-step__n{background:var(--c-navy);border-color:var(--c-navy);color:#fff;box-shadow:0 0 0 6px rgba(29,53,87,.08)}
.emx-step .emx-ico{display:flex;width:40px;height:40px;margin:28px 0 16px;color:var(--c-steel)}
.emx-step h3{font-size:17px;margin-bottom:8px}
.emx-step p{font-size:14.5px;color:var(--c-muted)}
.emx-proc__media{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s-5);margin-top:clamp(56px,7vw,88px)}
.emx-proc__media{height:clamp(300px,34vw,480px)}
.emx-proc__media .emx-media{height:100%}
.emx-cap-chip{display:inline-block;padding:9px 14px;background:rgba(12,24,42,.78);border-radius:var(--r-1);color:#fff}
.emx-media figcaption .emx-cap-chip{position:static}

/* ---------------------------------------------------------------------
   13. SECAO: CAPACIDADE (painel navy)
   --------------------------------------------------------------------- */
.emx-cap__bg{position:absolute;inset:-10% 0;z-index:0;overflow:hidden}
.emx-cap__bg img{width:100%;height:100%;object-fit:cover;opacity:.14;filter:grayscale(.35);transform:translate3d(0,var(--py,0px),0)}
.emx-cap__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--c-ink) 32%,rgba(12,24,42,.72) 100%)}
/* marca d'agua vazada que desliza com o scroll */
.emx-water{position:absolute;right:-2vw;top:clamp(40px,8vw,96px);z-index:1;pointer-events:none;user-select:none;
    font-size:clamp(120px,22vw,320px);font-weight:800;line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(169,194,218,.16);
    transform:translate3d(var(--wx,0px),0,0)}
/* trelica desenhada pelo scroll */
.emx-truss{position:relative;z-index:1;width:100%;height:auto;margin-bottom:clamp(36px,5vw,56px);color:rgba(169,194,218,.5)}
.emx-truss [pathLength]{fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--t,1));vector-effect:non-scaling-stroke}
.emx-js .emx-truss{--t:0}
.emx-truss .emx-truss__node{fill:var(--c-red);opacity:var(--t,1)}
.emx-cap__nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);position:relative;z-index:2}
.emx-cap__nums .emx-stat__lbl{font-size:13px}
.emx-cap__foot{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s-7);margin-top:clamp(44px,5vw,64px);position:relative;z-index:2}
.emx-cap__foot h3{color:#fff;margin-bottom:var(--s-4)}
.emx-chips{display:flex;flex-wrap:wrap;gap:10px}
.emx-chips li{padding:10px 16px;border:1px solid rgba(255,255,255,.18);border-radius:40px;font-size:14px;font-weight:500;color:#dbe4ef;background:rgba(255,255,255,.03);
    transition:background-color .3s,border-color .3s}
.emx-chips li:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
.emx-cities li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--c-line-dark);font-size:16px;font-weight:600;color:#fff}
.emx-cities li span{position:relative;width:8px;height:8px;border-radius:50%;background:var(--c-red);flex:none}
.emx-cities li span::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--c-red);animation:emx-radar 2.6s var(--ease-out) infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes emx-radar{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.2);opacity:0}}

/* ---------------------------------------------------------------------
   14. SECAO: OBRAS
   --------------------------------------------------------------------- */
.emx-obras__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(210px,19vw,270px);gap:16px}
.emx-obra--xl{grid-column:span 2;grid-row:span 2}
.emx-obra figcaption strong{display:block;font-size:18px;font-weight:700;line-height:1.25;transform:translateY(0);transition:transform .5s var(--ease-out)}
.emx-obra--xl figcaption strong{font-size:26px}
.emx-obra figcaption span{display:block;margin-top:6px;color:#c4d3e3}
.emx-obra figcaption::before{content:"";display:block;width:24px;height:2px;background:var(--c-red);margin-bottom:12px;transition:width .5s var(--ease-out)}
.emx-obra:hover img{--ms:1.14}
.emx-obra:hover figcaption::before{width:48px}
.emx-obra:hover figcaption strong{transform:translateY(-2px)}

/* ---------------------------------------------------------------------
   15. SECAO: DIFERENCIAIS
   --------------------------------------------------------------------- */
.emx-dif__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4)}
.emx-dif__grid .emx-card{padding:32px 24px 28px}
.emx-dif__grid .emx-ico{width:44px;height:44px;margin-bottom:22px}

/* ---------------------------------------------------------------------
   16. SECAO: CTA FINAL
   --------------------------------------------------------------------- */
.emx-cta{position:relative;overflow:hidden;background:var(--c-ink);padding-block:clamp(100px,12vw,160px);text-align:center}
.emx-cta__bg{position:absolute;inset:-12% 0;z-index:0;overflow:hidden}
.emx-cta__bg img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.05)}
.emx-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,53,87,.9) 0%,rgba(12,24,42,.95) 72%,#0c182a 100%)}
.emx-cta .emx-head{margin-inline:auto;margin-bottom:0;display:flex;flex-direction:column;align-items:center}
.emx-cta .emx-lead{margin-inline:auto}
.emx-cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4);margin-top:var(--s-7)}
.emx-cta__btns .emx-in{--i:2}

/* ---------------------------------------------------------------------
   16b. RODAPE (.emx-foot) - continua o CTA final no mesmo navy profundo,
        costurado por uma linha de cota; grade tecnica, guias de prancha e
        uma faixa de trelica na base.
   --------------------------------------------------------------------- */
.emx-foot{position:relative;margin-top:0;z-index:5;overflow:hidden;background:var(--c-ink);color:#b8c7d8;transition:none}
.emx-foot h3,.emx-foot p,.emx-foot ul{margin:0;padding:0}
.emx-foot ul{list-style:none}
.emx-foot a{text-decoration:none;color:inherit}
.emx-foot strong{font-weight:700}
.emx-foot :focus-visible{outline:2px solid var(--c-red);outline-offset:3px}
.emx-foot .emx-grid-bg{--grid-c:rgba(169,194,218,.06);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
.emx-foot .emx-guides{--guide-c:rgba(169,194,218,.06)}
.emx-foot.is-in .emx-guides i{transform:scaleY(1)}

/* linha de cota que liga CTA e rodape */
.emx-foot__datum{position:relative;z-index:2;display:flex;align-items:center;gap:18px;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);color:rgba(169,194,218,.55)}
.emx-foot__datum i{flex:1;height:9px;border-left:1px solid currentColor;border-right:1px solid currentColor;
    background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;transform-origin:center;transition:transform 1.4s var(--ease-io)}
.emx-foot__datum span{white-space:nowrap;color:var(--c-sky)}
.emx-js .emx-foot__datum:not(.is-in) i{transform:scaleX(0)}
.emx-foot__datum.emx-in{transform:none}

.emx-foot__main{display:grid;grid-template-columns:1.35fr 1fr .8fr 1.25fr;gap:clamp(32px,4vw,64px);padding-block:clamp(56px,7vw,88px) clamp(48px,6vw,72px)}
.emx-foot .emx-in:nth-child(2){--i:1}.emx-foot .emx-in:nth-child(3){--i:2}.emx-foot .emx-in:nth-child(4){--i:3}

.emx-foot__logo{display:inline-block;transition:transform .5s var(--ease-out)}
.emx-foot__logo img{width:112px;height:auto}
.emx-foot__logo:hover{transform:translateY(-2px)}
.emx-foot__brand p{margin-top:24px;font-size:15px;line-height:1.7;color:#9fb3c9;max-width:360px}
.emx-foot__social{display:flex;gap:10px;margin-top:28px}
.emx-foot__social a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:#dbe4ef;
    box-shadow:inset 0 0 0 1px rgba(169,194,218,.25);transition:transform .4s var(--ease-out),box-shadow .4s,color .3s,background-color .4s}
.emx-foot__social svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.emx-foot__social a:hover{transform:translateY(-3px);color:#fff;background:rgba(230,57,70,.12);box-shadow:inset 0 0 0 1px var(--c-red)}

.emx-foot__col h3{color:var(--c-sky);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.emx-foot__col h3::before{content:"";width:18px;height:2px;background:var(--c-red)}
.emx-foot__links li+li{margin-top:12px}
.emx-foot__links a{position:relative;display:inline-flex;align-items:center;font-size:15px;color:#c4d3e3;transition:color .3s,transform .4s var(--ease-out)}
.emx-foot__links a::before{content:"";position:absolute;left:-16px;top:50%;width:10px;height:1px;background:var(--c-red);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.emx-foot__links a:hover{color:#fff;transform:translateX(6px)}
.emx-foot__links a:hover::before{transform:scaleX(1)}
.emx-foot__links a.is-all{color:var(--c-sky);font-weight:600}

.emx-foot__contact li+li{margin-top:14px}
.emx-foot__contact a,.emx-foot__addr{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;font-size:15px;color:#e3eaf2;line-height:1.5}
.emx-foot__contact small{display:block;color:#7f95ad;font-size:10.5px;margin-bottom:2px}
.emx-foot__ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-1);box-shadow:inset 0 0 0 1px rgba(169,194,218,.22);color:var(--c-sky);transition:box-shadow .4s,color .3s,background-color .4s}
.emx-foot__ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.emx-foot__contact a:hover .emx-foot__ic{color:#fff;background:rgba(230,57,70,.12);box-shadow:inset 0 0 0 1px var(--c-red)}
.emx-foot__contact a span:last-child{overflow-wrap:anywhere;transition:color .3s}
.emx-foot__contact a:hover span:last-child{color:#fff}

/* faixa inferior */
.emx-foot__bar{position:relative;z-index:2;border-top:1px solid rgba(169,194,218,.12)}
.emx-foot__truss{display:block;width:100%;height:24px;color:rgba(169,194,218,.14)}
.emx-foot__truss path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.emx-foot__barin{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:22px 26px}
.emx-foot__barin p{font-size:14px;color:#8ea3ba}
.emx-foot__barin p strong{color:#dbe4ef}
.emx-foot__top{display:inline-flex;align-items:center;gap:12px;color:#c4d3e3;transition:color .3s}
.emx-foot__top span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(169,194,218,.3);transition:transform .4s var(--ease-out),box-shadow .4s}
.emx-foot__top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.emx-foot__top:hover{color:#fff}
.emx-foot__top:hover span{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--c-red)}

/* o CTA final passa a "derramar" no rodape: sem borda inferior visivel */
.emx-cta{padding-bottom:clamp(88px,10vw,128px)}

@media (max-width:1024px){
    .emx-foot__main{grid-template-columns:1fr 1fr;row-gap:48px}
}
@media (max-width:560px){
    .emx-foot__main{grid-template-columns:1fr;row-gap:40px}
    .emx-foot__datum span{font-size:10.5px}
    .emx-foot__barin{flex-direction:column;align-items:flex-start;padding-bottom:96px} /* espaco para a barra fixa de contato do celular */
}

/* ---------------------------------------------------------------------
   16c. BARRA DE CONTATO SUPERIOR (.emx-top) - navy profundo acima do menu,
        com icones de traco, texto em caixa alta tecnica e microinteracoes.
        Alinha com o .container do header do tema.
   --------------------------------------------------------------------- */
.emx-top{position:relative;z-index:100;background:var(--c-ink);color:#c4d3e3;border-bottom:1px solid rgba(169,194,218,.1);font-family:var(--f-sans);
    /* regua tecnica muito sutil na base */
    background-image:repeating-linear-gradient(90deg,rgba(169,194,218,.10) 0 1px,transparent 1px 14px);background-size:100% 3px;background-position:left bottom;background-repeat:no-repeat}
.emx-top *,.emx-top *::before,.emx-top *::after{box-sizing:border-box}
.emx-top ul{list-style:none;margin:0;padding:0}
.emx-top a{text-decoration:none;color:inherit}
.emx-top__in{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px}
.emx-top__group{display:flex;align-items:center;gap:6px}
.emx-top__group+.emx-top__group{gap:6px}
.emx-top__link,.emx-top__where{position:relative;display:inline-flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-1);
    font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1;color:#c4d3e3;transition:color .3s,background-color .35s}
.emx-top__where{color:#8ea3ba;font-weight:500}
.emx-top__group li+li{position:relative;padding-left:6px}
.emx-top__group li+li::before{content:"";position:absolute;left:0;top:50%;width:1px;height:14px;transform:translateY(-50%);background:rgba(169,194,218,.18)}
.emx-top__ic{display:flex;width:16px;height:16px;color:var(--c-sky);transition:color .3s,transform .4s var(--ease-out)}
.emx-top__ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* traco vermelho que se desenha sob o contato em foco */
.emx-top__link::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:1px;background:var(--c-red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.emx-top__link:hover,.emx-top__link:focus-visible{color:#fff;background:rgba(255,255,255,.04)}
.emx-top__link:hover::after,.emx-top__link:focus-visible::after{transform:scaleX(1)}
.emx-top__link:hover .emx-top__ic{color:var(--c-red);transform:translateY(-1px)}
.emx-top__link:focus-visible{outline:2px solid var(--c-red);outline-offset:1px}
@media (max-width:768px){
    .emx-top__where{display:none}
    .emx-top__txt{display:none}
    .emx-top__in{min-height:40px}
    .emx-top__link{padding:10px 12px}
    .emx-top__ic{width:18px;height:18px}
    .emx-top__group li+li::before{height:16px}
}

/* ---------------------------------------------------------------------
   17. RESPONSIVO
   --------------------------------------------------------------------- */
@media (max-width:1180px){
    .emx-auth .emx-wrap{grid-template-columns:1fr;gap:var(--s-6)}
    .emx-flow{grid-template-columns:repeat(3,1fr);row-gap:var(--s-7)}
    .emx-flow__rail{display:none}
    .emx-dif__grid{grid-template-columns:repeat(3,1fr)}
    .emx-cap__foot{grid-template-columns:1fr}
}
@media (max-width:1024px){
    .emx-sol__grid{grid-template-columns:repeat(2,1fr)}
    .emx-obras__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(200px,34vw,300px)}
    .emx-dif__grid{grid-template-columns:repeat(2,1fr)}
    .emx-guides{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
    .emx{font-size:15px}
    .emx-auth__stats{grid-template-columns:repeat(2,1fr);row-gap:var(--s-6)}
    .emx-proc__media{grid-template-columns:1fr}
    .emx-proc__media{height:auto}
    .emx-proc__media .emx-media{height:auto;aspect-ratio:4/3}
    .emx-cap__nums{grid-template-columns:1fr;gap:var(--s-5)}
    .emx-water{font-size:150px;top:24px}
    .emx-ticker__item{gap:22px;padding:17px 0 19px 22px}
    .emx-ticker__item a,.emx-ticker__item span.emx-ticker__name{font-size:13px;letter-spacing:.12em}
}
@media (max-width:560px){
    .emx-sol__grid,.emx-dif__grid{grid-template-columns:1fr}
    .emx-card{padding:28px 22px 24px}
    /* processo vira linha vertical com o trilho desenhado pelo scroll */
    .emx-flow{grid-template-columns:1fr;row-gap:30px;padding-left:0}
    .emx-flow__rail{display:block;left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
    .emx-flow__rail b{transform-origin:top;transform:scaleY(var(--p,0))}
    .emx-step{display:grid;grid-template-columns:56px 1fr;column-gap:20px;align-items:start}
    .emx-step__n{grid-row:span 2}
    .emx-step .emx-ico{display:none}
    .emx-step h3{margin:6px 0}
    .emx-obras__grid{grid-template-columns:1fr;grid-auto-rows:250px}
    .emx-obra--xl{grid-column:auto;grid-row:span 1}
    .emx-cta__btns{flex-direction:column;width:100%;max-width:340px}
    .emx-cta__btns .emx-btn{width:100%}
    .emx-guides{display:none}
}

/* ---------------------------------------------------------------------
   18. MOVIMENTO REDUZIDO - mantem entradas suaves, remove movimento
       continuo e parallax (os gatilhos mais sensiveis)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    .emx-cities li span::after{animation:none}
    .emx-media img,.emx-cap__bg img,.emx-cta__bg img{--py:0px!important}
    .emx-water{--wx:0px!important}
}

/* =====================================================================
   19. COMPONENTES DE CONVERSAO (pagina-modelo 2: Galpao Industrial)
       Reutilizaveis nas demais paginas de servico.
   ===================================================================== */

/* --- 19.1 Hero de conversao (.emx-hero): video real ao fundo, texto a esquerda --- */
.emx-hero{position:relative;display:flex;align-items:center;min-height:560px;height:calc(100vh - var(--emx-hdr,13rem));height:calc(100svh - var(--emx-hdr,13rem));max-height:1000px;overflow:hidden;background:var(--c-ink);color:#fff}
.emx-hero__media,.emx-hero__media img,.emx-hero__media video{position:absolute;inset:0;width:100%;height:100%}
.emx-hero__media img,.emx-hero__media video{object-fit:cover}
.emx-hero__media video{opacity:0;transition:opacity .9s ease}
.emx-hero__media video.is-playing{opacity:1}
.emx-hero__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,24,42,.92) 0%,rgba(12,24,42,.78) 38%,rgba(12,24,42,.35) 75%,rgba(12,24,42,.25) 100%),linear-gradient(0deg,rgba(12,24,42,.85) 0%,rgba(12,24,42,0) 35%)}
.emx-hero .emx-wrap{position:relative;z-index:2}
.emx-hero__box{max-width:780px}
.emx-hero .emx-eyebrow{color:var(--c-sky)}
.emx-hero h1{font-size:clamp(38px,4.6vw,64px);line-height:1.02;font-weight:800;letter-spacing:-.03em;color:#fff;text-transform:uppercase;margin:0}
.emx .emx-hero__lead{margin-top:22px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:#d6e0eb;max-width:600px}
.emx-hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.emx .emx-hero__trust{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(169,194,218,.2);max-width:640px}
.emx-hero__trust li{display:flex;align-items:baseline;gap:8px;color:#b8c7d8;font-size:14px}
.emx-hero__trust strong{color:#fff;font-size:20px;font-weight:700;letter-spacing:-.01em}
/* entrada no carregamento (nao depende do scroll) */
.emx-hero [data-hero-in]{animation:emx-hero-in 1s var(--ease-out) both;animation-delay:calc(var(--i,0) * 110ms + 150ms)}
@keyframes emx-hero-in{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
/* indicador de rolagem */
.emx-hero__scroll{position:absolute;left:50%;bottom:22px;z-index:2;width:1px;height:46px;background:rgba(255,255,255,.18);overflow:hidden}
.emx-hero__scroll::after{content:"";position:absolute;left:0;top:0;width:1px;height:50%;background:#fff;animation:emx-scroll-line 1.8s cubic-bezier(.77,0,.18,1) infinite}
@keyframes emx-scroll-line{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}

/* --- 19.2 Bloco dividido (texto + foto real com parallax) --- */
.emx-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
.emx-split .emx-media{aspect-ratio:4/5;max-height:640px}
.emx .emx-scope{display:grid;gap:4px;margin-top:36px}
.emx-scope li{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--c-line)}
.emx-scope li:last-child{border-bottom:1px solid var(--c-line)}
.emx-scope .emx-ico{width:44px;height:44px;color:var(--c-navy)}
.emx-scope h3{margin-bottom:6px}
.emx-scope p{color:var(--c-muted);font-size:15px}

/* --- 19.3 Cards de aplicacao com foto real --- */
.emx-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.emx-app{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-line);border-radius:var(--r-2);overflow:hidden;box-shadow:var(--shadow-1);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.emx-app:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}
.emx-app .emx-media{aspect-ratio:4/3;border-radius:0}
.emx-app .emx-media::after{display:none}
.emx-app:hover .emx-media img{--ms:1.14}
.emx-app__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.emx-app__body p{color:var(--c-muted);font-size:14.5px;flex:1}
.emx-app__src{margin-top:10px;color:#8796a8;font-size:10.5px}

/* --- 19.4 Faixa de CTA intermediaria --- */
.emx-band{position:relative;overflow:hidden;background:var(--c-navy);color:#fff;border-radius:var(--r-2)}
.emx-band__bg{position:absolute;inset:-15% 0;z-index:0;overflow:hidden}
.emx-band__bg img{width:100%;height:100%;object-fit:cover;opacity:.22;transform:translate3d(0,var(--py,0px),0)}
.emx-band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c-navy) 35%,rgba(29,53,87,.6))}
.emx-band__in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:clamp(36px,5vw,56px) clamp(28px,5vw,64px)}
.emx-band h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;font-weight:700;color:#fff;max-width:620px}
.emx .emx-band p{margin-top:10px;color:#c4d3e3;max-width:560px}
.emx-band__ctas{display:flex;gap:12px;flex-wrap:wrap}

/* --- 19.5 Perguntas frequentes (acordeao acessivel) --- */
.emx-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.emx-faq__list{border-top:1px solid var(--c-line)}
.emx-faq__item{border-bottom:1px solid var(--c-line)}
.emx-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;background:none;border:0;cursor:pointer;text-align:left;
    font-family:var(--f-sans);font-size:17px;font-weight:600;color:var(--c-navy);transition:color .3s}
.emx-faq__q:hover{color:var(--c-red)}
.emx-faq__q i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--c-line);transition:transform .45s var(--ease-out),box-shadow .3s,background-color .3s}
.emx-faq__q i::before,.emx-faq__q i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.emx-faq__q i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .45s var(--ease-out)}
.emx-faq__q[aria-expanded="true"] i{background:var(--c-navy);color:#fff;box-shadow:none}
.emx-faq__q[aria-expanded="true"] i::after{transform:translate(-50%,-50%) rotate(0deg)}
.emx-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.emx-faq__a>div{overflow:hidden}
.emx .emx-faq__a p{padding:0 48px 24px 0;color:var(--c-muted);font-size:15.5px}
.emx-faq__item.is-open .emx-faq__a{grid-template-rows:1fr}

@media (max-width:1024px){
    .emx-split{grid-template-columns:1fr}
    .emx-split .emx-media{aspect-ratio:16/10;max-height:none}
    .emx-apps{grid-template-columns:repeat(2,1fr)}
    .emx-faq{grid-template-columns:1fr}
}
@media (max-width:560px){
    .emx-hero{align-items:flex-end;height:auto;max-height:none;min-height:calc(100svh - var(--emx-hdr,13rem));padding-block:72px 48px}
    .emx-hero h1{font-size:clamp(34px,10vw,44px)}
    .emx .emx-hero__lead{font-size:16px}
    .emx-hero__shade{background:linear-gradient(0deg,rgba(12,24,42,.95) 0%,rgba(12,24,42,.75) 55%,rgba(12,24,42,.4) 100%)}
    .emx-hero__ctas{flex-direction:column}
    .emx-hero__ctas .emx-btn{width:100%}
    .emx-hero__trust{gap:8px 18px}
    .emx-hero__trust strong{font-size:17px}
    .emx-hero__scroll{display:none}
    .emx-apps{grid-template-columns:1fr}
    .emx-band__ctas,.emx-band__ctas .emx-btn{width:100%}
    .emx-faq__q{font-size:16px}
    .emx-faq__a p{padding-right:0}
}