.rmx-ecommerce {
    --ecom-deep: #08100c;
    --ecom-panel: #111713;
    --ecom-green: #B9C17B;
    --ecom-lime: #909B3B;
    --ecom-green-text: #5F6B2F;
    --ecom-soft: #f6f7f2;
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: none;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #fff;
    color: #262626;
}

.rmx-ecommerce .rmx-shell {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

.rmx-ecommerce h1,
.rmx-ecommerce h2,
.rmx-ecommerce h3,
.rmx-ecommerce p { margin-top: 0; }

.rmx-ecom-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(4,12,8,.985) 0%, rgba(7,16,11,.93) 36%, rgba(8,18,12,.69) 68%, rgba(7,13,9,.84) 100%),
        radial-gradient(circle at 78% 28%, rgba(207,224,0,.19), transparent 28%),
        url('https://romex.com.br/wp-content/uploads/2026/09/romex-bg-ecommerce-neon-rede-01.png') right center / cover no-repeat,
        linear-gradient(118deg,#07100c,#121c15 70%,#09100c);
}

.rmx-ecom-hero::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(112deg, transparent 0 54%, rgba(207,224,0,.055) 54% 57%, transparent 57% 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 38px);
    opacity:.92;
}

.rmx-ecom-hero-grid {
    position: relative;
    z-index: 1;
    min-height: 540px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 54px;
    padding-block: 62px;
}

.rmx-ecom-h1 {
    margin: 0;
    max-width: 640px;
    font-size: clamp(42px, 4vw, 60px);
    line-height: .99;
    letter-spacing: -.05em;
    font-weight: 800;
}
.rmx-ecom-title-line { display:block; color:#fff; }
.rmx-ecom-title-line.is-accent {
    margin-top: 8px;
    color: var(--ecom-green);
}
.rmx-no-break { white-space: nowrap; color: inherit !important; }

.rmx-ecom-lead {
    max-width: 600px;
    margin: 30px 0 0;
    color: rgba(255,255,255,.82);
    font-size: clamp(16px,1.2vw,19px);
    line-height: 1.58;
}

.rmx-ecom-icon {
    width:46px;
    height:46px;
    display:inline-grid;
    place-items:center;
    flex:0 0 46px;
    border:1px solid rgba(171,191,17,.35);
    border-radius:50%;
    background:#f8fadf;
}
.rmx-ecom-icon img {
    width:26px;
    height:26px;
    object-fit:contain;
}

.rmx-ecom-hero-art {
    position:relative;
    min-width:0;
}
.rmx-ecom-hero-photo {
    margin:0;
    overflow:hidden;
    border-radius:24px;
    min-height:330px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 30px 80px rgba(0,0,0,.38);
}
.rmx-ecom-hero-photo img {
    width:100%;
    height:100%;
    min-height:330px;
    object-fit:cover;
    display:block;
}
.rmx-ecom-hero-ui {
    position:absolute;
    right:-24px;
    top:22px;
    width:min(46%,280px);
    padding:10px;
    border:1px solid rgba(207,224,0,.18);
    border-radius:18px;
    background:rgba(8,16,12,.92);
    box-shadow:0 22px 46px rgba(0,0,0,.34);
}
.rmx-ecom-hero-ui img { display:block; border-radius:12px; }
.rmx-ecom-hero-label {
    position:absolute;
    left:20px;
    right:20px;
    bottom:18px;
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.13);
    border-left:3px solid var(--ecom-green);
    border-radius:12px;
    background:rgba(5,12,8,.88);
    backdrop-filter:blur(8px);
}
.rmx-ecom-hero-label span {
    color:var(--ecom-green);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.rmx-ecom-hero-label strong {
    font-size:13px;
    text-align:right;
}

.rmx-ecom-section { padding: 96px 0; }
.rmx-ecom-problem { background: var(--ecom-soft); }
.rmx-ecom-heading { max-width:800px; margin-bottom:42px; }
.rmx-ecom-heading.is-centered { text-align:center; margin-inline:auto; }
.rmx-ecom-heading.is-light { color:#fff; }

.rmx-ecommerce .rmx-eyebrow {
    color: var(--ecom-green-text);
}

.rmx-ecom-hero .rmx-eyebrow,
.rmx-ecom-rhythms .rmx-eyebrow,
.rmx-ecom-cta .rmx-eyebrow {
    color: var(--ecom-lime);
}
.rmx-ecom-heading h2,
.rmx-ecom-split h2,
.rmx-ecom-tech h2,
.rmx-ecom-scale h2,
.rmx-ecom-segments h2,
.rmx-ecom-cta h2 {
    margin:0;
    font-size:clamp(30px,2.75vw,44px);
    line-height:1.02;
    letter-spacing:-.04em;
}
.rmx-ecom-heading p:not(.rmx-eyebrow),
.rmx-ecom-split p,
.rmx-ecom-tech p,
.rmx-ecom-scale p,
.rmx-ecom-segments p,
.rmx-ecom-cta p {
    color:#68706b;
    font-size:17px;
    line-height:1.65;
}
.rmx-ecom-heading.is-light p:not(.rmx-eyebrow){ color:rgba(255,255,255,.72); }

.rmx-ecom-problem-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.rmx-ecom-problem-grid article,
.rmx-ecom-flow-grid article {
    min-width:0;
    padding:26px;
    border:1px solid #e3e6df;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 34px rgba(26,35,28,.05);
}
.rmx-ecom-problem-grid h3,
.rmx-ecom-flow-grid h3 {
    margin:18px 0 8px;
    font-size:20px;
}
.rmx-ecom-problem-grid p,
.rmx-ecom-flow-grid p {
    color:#68706b;
    line-height:1.55;
    margin:0;
}

.rmx-ecom-split,
.rmx-ecom-tech-grid,
.rmx-ecom-scale-grid,
.rmx-ecom-segments-grid {
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:64px;
    align-items:center;
}
.rmx-ecom-chips {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}
.rmx-ecom-chips span {
    padding:9px 12px;
    border:1px solid #dfe5d8;
    border-radius:999px;
    background:#fff;
    font-size:13px;
    font-weight:700;
}
.rmx-ecom-image-card {
    position:relative;
    margin:0;
    overflow:hidden;
    border-radius:24px;
    min-height:390px;
    background:#101510;
    box-shadow:0 24px 60px rgba(22,31,24,.13);
}
.rmx-ecom-image-card img {
    width:100%;
    height:390px;
    object-fit:cover;
    display:block;
}
.rmx-ecom-image-card figcaption {
    position:absolute;
    left:18px; right:18px; bottom:18px;
    padding:14px 16px;
    border-radius:12px;
    color:#fff;
    background:rgba(8,15,10,.88);
}
.rmx-ecom-image-card figcaption strong { display:block; }
.rmx-ecom-image-card figcaption span { display:block; margin-top:4px; color:rgba(255,255,255,.72); font-size:13px; }

.rmx-ecom-flow { background:#fff; }
.rmx-ecom-flow-grid {
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-top:8px;
}
.rmx-ecom-flow-grid::before {
    content:"";
    position:absolute;
    left:5%;
    right:5%;
    top:43px;
    height:2px;
    background:linear-gradient(90deg,rgba(171,191,17,.18),rgba(207,224,0,.8),rgba(171,191,17,.18));
    z-index:0;
}
.rmx-ecom-flow-grid article {
    position:relative;
    z-index:1;
    min-height:250px;
    padding:24px 22px 24px;
    overflow:hidden;
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.rmx-ecom-flow-grid article::after {
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:4px;
    background:linear-gradient(90deg,var(--ecom-lime),var(--ecom-green));
    transform:scaleX(.35);
    transform-origin:left;
    transition:transform .25s ease;
}
.rmx-ecom-flow-grid article:hover {
    transform:translateY(-6px);
    border-color:rgba(171,191,17,.5);
    box-shadow:0 18px 38px rgba(17,21,19,.09);
}
.rmx-ecom-flow-grid article:hover::after { transform:scaleX(1); }
.rmx-ecom-flow-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:22px;
}
.rmx-ecom-flow-top .rmx-ecom-icon {
    width:54px;
    height:54px;
    flex-basis:54px;
    box-shadow:0 0 0 7px #fff;
}
.rmx-ecom-step {
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:999px;
    color:#68706b;
    background:#f4f6ef;
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}
.rmx-ecom-flow-kicker {
    display:block;
    margin-bottom:7px;
    color:var(--ecom-green-text);
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.rmx-ecom-rhythms {
    position:relative;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 12% 12%, rgba(171,191,17,.18), transparent 27%),
        radial-gradient(circle at 88% 72%, rgba(207,224,0,.08), transparent 24%),
        linear-gradient(118deg,#09100c,#111913 70%,#0a100c);
}
.rmx-ecom-rhythms::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.20;
    background:
        url('https://romex.com.br/wp-content/uploads/2026/09/romex-ecommerce-asset-malha-ondas-logisticas-neon-07.png') right center / min(760px,62vw) auto no-repeat;
}
.rmx-ecom-rhythms .rmx-shell { position:relative; z-index:1; }
.rmx-ecom-rhythm-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}
.rmx-ecom-rhythm-grid article {
    min-height:220px;
    padding:26px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:18px;
    background:rgba(255,255,255,.035);
}
.rmx-ecom-rhythm-grid h3 { margin:18px 0 8px; font-size:22px; }
.rmx-ecom-rhythm-grid p { margin:0; color:rgba(255,255,255,.72); line-height:1.58; }

.rmx-ecom-tech { background:#f7f8f4; }
.rmx-ecom-tech-visual {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    margin:0;
    padding:34px;
    border-radius:26px;
    background:
        radial-gradient(circle at 78% 18%, rgba(207,224,0,.16), transparent 25%),
        linear-gradient(145deg,#0a120d 0%,#111a13 58%,#0c120e 100%);
    border:1px solid rgba(171,191,17,.18);
    box-shadow:0 28px 70px rgba(17,25,18,.16);
}
.rmx-ecom-tech-visual::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.22;
    background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 34px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 34px);
}
.rmx-ecom-tech-visual::after {
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-92px;
    bottom:-96px;
    border:1px solid rgba(207,224,0,.18);
    border-radius:50%;
    box-shadow:0 0 0 34px rgba(207,224,0,.035);
    pointer-events:none;
}
.rmx-ecom-tech-visual img {
    display:block;
    width:100%;
    max-height:340px;
    object-fit:contain;
    border-radius:16px;
}

.rmx-ecom-scale-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.rmx-ecom-route-card {
    margin:0;
    padding:26px;
    border-radius:24px;
    background:#0c120e;
}
.rmx-ecom-route-card img {
    display:block;
    width:100%;
    max-height:340px;
    object-fit:contain;
}

.rmx-ecom-segments {
    background:
        linear-gradient(135deg,rgba(171,191,17,.07),transparent 36%),
        #f7f8f4;
}
.rmx-ecom-profile-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.rmx-ecom-profile-grid article {
    position:relative;
    min-height:154px;
    padding:22px 20px;
    overflow:hidden;
    border:1px solid #e4e8df;
    border-radius:18px;
    background:#fff;
    box-shadow:0 14px 34px rgba(20,28,21,.05);
}
.rmx-ecom-profile-grid article::after {
    content:"";
    position:absolute;
    right:-28px;
    bottom:-34px;
    width:90px;
    height:90px;
    border:1px solid rgba(171,191,17,.18);
    border-radius:50%;
    box-shadow:0 0 0 16px rgba(171,191,17,.035);
}
.rmx-ecom-profile-grid span {
    display:block;
    margin-bottom:14px;
    color:var(--ecom-green-text);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}
.rmx-ecom-profile-grid strong {
    display:block;
    color:#262626;
    font-size:19px;
    line-height:1.15;
}
.rmx-ecom-profile-grid p {
    margin:8px 0 0;
    color:#68706b;
    font-size:14px;
    line-height:1.5;
}

.rmx-ecom-cta { padding-top:72px; }
.rmx-ecom-cta-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:44px;
    align-items:center;
    padding:40px;
    border-radius:24px;
    color:#fff;
    background:
        radial-gradient(circle at 85% 20%, rgba(207,224,0,.16), transparent 30%),
        #0c120e;
}
.rmx-ecom-cta-inner p:not(.rmx-eyebrow){ color:rgba(255,255,255,.72); }
.rmx-ecom-cta .rmx-btns { margin:0; }

[data-rmx-ecom-reveal] {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
}
[data-rmx-ecom-reveal].is-visible {
    opacity:1;
    transform:none;
}

@media (max-width: 1180px) {
    .rmx-ecom-hero-grid { gap:34px; }
    .rmx-ecom-hero-ui { right:10px; }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .rmx-ecom-hero-grid {
        min-height:440px;
        padding-block:44px;
        gap:30px;
    }
    .rmx-ecom-h1 { font-size:clamp(38px,5vw,52px); }
    .rmx-ecom-lead { margin-top:22px; font-size:16px; }
    .rmx-ecom-hero-photo,
    .rmx-ecom-hero-photo img { min-height:300px; height:300px; }
    .rmx-ecom-section { padding:82px 0; }
}

@media (max-height: 800px) and (min-width: 901px) {
    .rmx-ecom-hero-grid {
        min-height:430px;
        padding-block:38px;
    }
    .rmx-ecom-h1 { font-size:clamp(40px,4vw,58px); }
    .rmx-ecom-lead { margin-top:24px; }
    .rmx-ecom-hero-photo,
    .rmx-ecom-hero-photo img { min-height:300px; height:300px; }
}

@media (max-width: 900px) {
    .rmx-ecom-hero-grid,
    .rmx-ecom-split,
    .rmx-ecom-tech-grid,
    .rmx-ecom-scale-grid,
    .rmx-ecom-segments-grid,
    .rmx-ecom-cta-inner {
        grid-template-columns:1fr;
    }
    .rmx-ecom-hero-grid {
        min-height:auto;
        padding-top:100px;
        padding-bottom:54px;
    }
    .rmx-ecom-problem-grid,
    .rmx-ecom-flow-grid,
    .rmx-ecom-rhythm-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .rmx-ecom-flow-grid::before { display:none; }
    .rmx-ecom-cta .rmx-btns { margin-top:0; }
}

@media (max-width: 620px) {
    .rmx-ecom-hero {
        background:
            linear-gradient(180deg,rgba(4,10,7,.88),rgba(4,10,7,.72) 46%,rgba(4,10,7,.94) 100%),
            radial-gradient(circle at 70% 24%,rgba(207,224,0,.12),transparent 34%),
            url('https://romex.com.br/wp-content/uploads/2026/09/romex-bg-ecommerce-neon-rotas-02.png') center / cover no-repeat,
            #07100c;
    }
    .rmx-ecom-hero-grid {
        padding-top:96px;
        padding-bottom:22px;
        gap:28px;
        text-align:center;
    }
    .rmx-ecom-h1 { font-size:clamp(34px,9.6vw,41px); line-height:1.01; }
    .rmx-ecom-title-line.is-accent { margin-top:6px; }
    .rmx-ecom-lead { font-size:16px; }
    .rmx-ecom-hero-art { margin-top:4px; }
    .rmx-ecom-hero-photo,
    .rmx-ecom-hero-photo img { min-height:300px; height:300px; }
    .rmx-ecom-hero-ui {
        width:42%;
        right:10px;
        top:10px;
    }
    .rmx-ecom-hero-label {
        left:10px; right:10px; bottom:10px;
        display:block;
        text-align:left;
    }
    .rmx-ecom-hero-label strong { display:block; margin-top:5px; text-align:left; }
    .rmx-ecom-section { padding:68px 0; }
    .rmx-ecom-heading { margin-bottom:28px; }
    .rmx-ecom-heading h2,
    .rmx-ecom-split h2,
    .rmx-ecom-tech h2,
    .rmx-ecom-scale h2,
    .rmx-ecom-segments h2,
    .rmx-ecom-cta h2 { font-size:clamp(29px,9vw,38px); }
    .rmx-ecom-heading p:not(.rmx-eyebrow),
    .rmx-ecom-split p,
    .rmx-ecom-tech p,
    .rmx-ecom-scale p,
    .rmx-ecom-segments p,
    .rmx-ecom-cta p { font-size:16px; }
    .rmx-ecom-problem-grid,
    .rmx-ecom-flow-grid,
    .rmx-ecom-rhythm-grid { grid-template-columns:1fr; }
    .rmx-ecom-flow-grid article { min-height:0; }
    .rmx-ecom-flow-top { margin-bottom:16px; }
    .rmx-ecom-profile-grid { grid-template-columns:1fr; }
    .rmx-ecom-profile-grid article { min-height:0; }
    .rmx-ecom-image-card,
    .rmx-ecom-image-card img { min-height:300px; height:300px; }
    .rmx-ecom-cta-inner { padding:26px 22px; gap:22px; }
}

@media (prefers-reduced-motion: reduce) {
    [data-rmx-ecom-reveal] {
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}


/* Controle tipográfico e consistência editorial */
.rmx-ecommerce h1,
.rmx-ecommerce h2,
.rmx-ecommerce h3,
.rmx-ecommerce strong,
.rmx-ecommerce .rmx-eyebrow,
.rmx-ecommerce .rmx-btn {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    text-wrap: balance;
}

@media (max-width: 620px) {
    .rmx-ecommerce .rmx-shell {
        width: min(calc(100% - 30px), 1180px);
    }
}


/* E-commerce v3 — direção de arte, profundidade e movimento */
.rmx-ecom-hero {
    background-position: center, center, right center, center;
}
.rmx-ecom-hero::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 78% 46%, rgba(234,242,5,.12), transparent 25%),
        linear-gradient(90deg, rgba(4,12,8,.15), transparent 52%, rgba(4,12,8,.18));
    mix-blend-mode:screen;
    opacity:.8;
}
.rmx-ecom-hero-grid { max-height: none; }
.rmx-ecom-hero-copy { padding-right: 8px; }
.rmx-ecom-h1 { max-width: 600px; }
.rmx-ecom-lead { margin-top: 26px; }
.rmx-ecom-hero-art::before {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-28px;
    top:-28px;
    border:1px solid rgba(234,242,5,.18);
    border-radius:50%;
    box-shadow:0 0 0 34px rgba(234,242,5,.025);
    pointer-events:none;
}
.rmx-ecom-hero-photo {
    transform: perspective(1000px) rotateY(-1.5deg);
    transition: transform .45s ease, box-shadow .45s ease;
}
.rmx-ecom-hero-art:hover .rmx-ecom-hero-photo {
    transform: perspective(1000px) rotateY(0deg) translateY(-4px);
    box-shadow:0 34px 90px rgba(0,0,0,.44);
}

/* Problemas: cartões com ritmos visuais diferentes, sem perder sobriedade */
.rmx-ecom-problem-grid article {
    position:relative;
    overflow:hidden;
}
.rmx-ecom-problem-grid article::after {
    content:"";
    position:absolute;
    width:86px;
    height:86px;
    right:-34px;
    bottom:-38px;
    border:1px solid rgba(171,191,17,.16);
    border-radius:50%;
}
.rmx-ecom-problem-grid article:nth-child(2) { transform:translateY(14px); }
.rmx-ecom-problem-grid article:nth-child(3) { transform:translateY(28px); }

/* Jornada interativa: eixo visual progressivo */
.rmx-ecom-flow-grid::before {
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.05s cubic-bezier(.2,.75,.25,1);
}
.rmx-ecom-flow-grid.is-active::before { transform:scaleX(1); }
.rmx-ecom-flow-grid article {
    opacity:.72;
    transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,opacity .35s ease;
}
.rmx-ecom-flow-grid article.is-visible { opacity:1; }
.rmx-ecom-flow-grid article:hover .rmx-ecom-icon {
    transform:scale(1.06) rotate(-3deg);
}
.rmx-ecom-flow-grid .rmx-ecom-icon { transition:transform .3s ease; }

/* Seção escura recebe malha própria do e-commerce */
.rmx-ecom-rhythms::after {
    content:"";
    position:absolute;
    left:-8%;
    bottom:-40%;
    width:58%;
    height:120%;
    pointer-events:none;
    opacity:.24;
    background:url('https://romex.com.br/wp-content/uploads/2026/09/romex-ecommerce-asset-rede-logistica-neon-05.png') left bottom / contain no-repeat;
}
.rmx-ecom-rhythm-grid article {
    backdrop-filter:blur(4px);
    transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.rmx-ecom-rhythm-grid article:hover {
    transform:translateY(-5px);
    border-color:rgba(234,242,5,.28);
    background:rgba(255,255,255,.055);
}

/* Tecnologia: painel com moldura viva, sem repetir listas da hero */
.rmx-ecom-tech-visual {
    min-height:360px;
    display:grid;
    place-items:center;
}
.rmx-ecom-tech-visual::before {
    background:
        url('https://romex.com.br/wp-content/uploads/2026/09/romex-ecommerce-asset-malha-ondas-logisticas-neon-07.png') right 14% bottom 12% / 72% auto no-repeat,
        repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 34px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 34px);
    opacity:.28;
}
.rmx-ecom-tech-visual img {
    position:relative;
    z-index:2;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.28));
}

/* Escala: novo asset exclusivo da página */
.rmx-ecom-route-card {
    position:relative;
    overflow:hidden;
    min-height:360px;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 50% 48%,rgba(207,224,0,.13),transparent 34%),
        linear-gradient(145deg,#08100c,#111713);
    border:1px solid rgba(171,191,17,.16);
    box-shadow:0 22px 55px rgba(17,25,18,.12);
}
.rmx-ecom-route-card::after {
    content:"";
    position:absolute;
    inset:0;
    opacity:.14;
    background:url('https://romex.com.br/wp-content/uploads/2026/09/romex-ecommerce-asset-rota-operacional-neon-horizontal-09.png') center bottom / 86% auto no-repeat;
}
.rmx-ecom-route-card img {
    position:relative;
    z-index:2;
    max-height:300px;
    width:min(88%,560px);
}

/* Perfis: assimetria leve para sair do grid excessivamente rígido */
.rmx-ecom-profile-grid article:nth-child(2),
.rmx-ecom-profile-grid article:nth-child(4) { transform:translateY(14px); }
.rmx-ecom-profile-grid article {
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.rmx-ecom-profile-grid article:hover {
    transform:translateY(-4px);
    border-color:rgba(171,191,17,.36);
    box-shadow:0 18px 40px rgba(20,28,21,.08);
}
.rmx-ecom-profile-grid article:nth-child(2):hover,
.rmx-ecom-profile-grid article:nth-child(4):hover { transform:translateY(8px); }

/* CTA com assinatura visual exclusiva */
.rmx-ecom-cta-inner {
    position:relative;
    overflow:hidden;
    isolation:isolate;
}
.rmx-ecom-cta-inner::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 0 0 46%;
    opacity:.30;
    background:url('https://romex.com.br/wp-content/uploads/2026/09/romex-ecommerce-asset-logistica-urbana-conexoes-neon-10.png') right center / cover no-repeat;
}
.rmx-ecom-cta-inner::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(90deg,rgba(8,16,12,.96) 0 48%,rgba(8,16,12,.72) 76%,rgba(8,16,12,.84));
}

/* Direções de entrada */
[data-rmx-ecom-reveal="left"] { transform:translateX(-28px); }
[data-rmx-ecom-reveal="right"] { transform:translateX(28px); }
[data-rmx-ecom-reveal="up"],
[data-rmx-ecom-reveal]:not([data-rmx-ecom-reveal="left"]):not([data-rmx-ecom-reveal="right"]) { transform:translateY(24px); }
[data-rmx-ecom-reveal].is-visible { transform:none; }

/* Notebook: hero inteira dentro da primeira dobra */
@media (max-height: 800px) and (min-width: 901px) {
    .rmx-ecom-hero-grid {
        min-height:420px;
        padding-block:34px;
    }
    .rmx-ecom-h1 { font-size:clamp(38px,3.65vw,54px); }
    .rmx-ecom-lead { margin-top:20px; font-size:16px; line-height:1.5; }
    .rmx-ecom-hero-photo,
    .rmx-ecom-hero-photo img { min-height:286px; height:286px; }
    .rmx-ecom-hero-label { bottom:12px; }
}

/* Mobile: tudo que estiver fora de cards segue eixo central */
@media (max-width: 620px) {
    .rmx-ecom-hero {
        background:
            linear-gradient(180deg,rgba(4,10,7,.90),rgba(4,10,7,.68) 45%,rgba(4,10,7,.95) 100%),
            url('https://romex.com.br/wp-content/uploads/2026/09/romex-bg-ecommerce-neon-rotas-02.png') center / cover no-repeat;
    }
    .rmx-ecom-hero-grid {
        padding-top:96px;
        padding-bottom:28px;
        gap:30px;
    }
    .rmx-ecom-h1 { max-width:100%; margin-inline:auto; }
    .rmx-ecom-lead { margin:24px auto 0; }
    .rmx-ecom-problem-grid article:nth-child(n),
    .rmx-ecom-profile-grid article:nth-child(n) { transform:none; }
    .rmx-ecom-heading,
    .rmx-ecom-solution-copy,
    .rmx-ecom-tech-copy,
    .rmx-ecom-scale-grid > div,
    .rmx-ecom-segments-grid > div:first-child,
    .rmx-ecom-cta-inner > div:first-child { text-align:center; margin-inline:auto; }
    .rmx-ecom-chips,
    .rmx-ecom-scale-grid .rmx-btn,
    .rmx-ecom-cta .rmx-btns { justify-content:center; }
    .rmx-ecom-scale-grid .rmx-btn { display:inline-flex; }
    .rmx-ecom-tech-visual,
    .rmx-ecom-route-card { min-height:290px; }
    .rmx-ecom-route-card img { max-height:250px; }
    .rmx-ecom-cta-inner::before { inset:42% 0 0; opacity:.22; }
    .rmx-ecom-cta-inner::after { background:linear-gradient(180deg,rgba(8,16,12,.96) 0 62%,rgba(8,16,12,.80)); }
}

@media (prefers-reduced-motion: reduce) {
    .rmx-ecom-flow-grid::before { transform:none !important; }
    .rmx-ecom-hero-photo,
    .rmx-ecom-flow-grid article,
    .rmx-ecom-rhythm-grid article,
    .rmx-ecom-profile-grid article { transition:none !important; transform:none !important; }
}


/* E-commerce v4 — acabamento editorial, alinhamento e mobile validável */
.rmx-ecom-section {
    padding: 88px 0;
}

.rmx-ecom-heading {
    margin-bottom: 36px;
}

.rmx-ecom-heading h2,
.rmx-ecom-split h2,
.rmx-ecom-tech h2,
.rmx-ecom-scale h2,
.rmx-ecom-segments h2,
.rmx-ecom-cta h2 {
    font-size: clamp(30px, 2.55vw, 42px);
    line-height: 1.035;
}

.rmx-ecom-heading p:not(.rmx-eyebrow),
.rmx-ecom-split p,
.rmx-ecom-tech p,
.rmx-ecom-scale p,
.rmx-ecom-segments p,
.rmx-ecom-cta p {
    font-size: clamp(16px, 1.05vw, 17px);
}

/* Dor operacional: três cartões alinhados, sem degraus artificiais */
.rmx-ecom-problem-grid {
    align-items: stretch;
    gap: 16px;
}

.rmx-ecom-problem-grid article {
    min-height: 214px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rmx-ecom-problem-grid article:nth-child(2),
.rmx-ecom-problem-grid article:nth-child(3) {
    transform: none;
}

.rmx-ecom-problem-grid article h3 {
    margin-top: 20px;
}

.rmx-ecom-problem-grid article p {
    margin-top: auto;
    padding-top: 8px;
}

/* Coleta no cliente: composição mais equilibrada e com mesma presença do texto */
.rmx-ecom-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 70px;
}

.rmx-ecom-solution-copy {
    max-width: 540px;
}

.rmx-ecom-image-card,
.rmx-ecom-image-card img {
    min-height: 410px;
    height: 410px;
}

/* Jornada: linha operacional mais limpa e cartões com leitura uniforme */
.rmx-ecom-flow-grid {
    gap: 16px;
}

.rmx-ecom-flow-grid::before {
    left: 7%;
    right: 7%;
    top: 50px;
    height: 1px;
}

.rmx-ecom-flow-grid article {
    min-height: 244px;
    padding: 22px 21px 24px;
}

.rmx-ecom-flow-top {
    margin-bottom: 19px;
}

.rmx-ecom-flow-top .rmx-ecom-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
}

/* Ritmos: usa um único asset de fundo e destaca atendimento humano */
.rmx-ecom-rhythms::before {
    background: none;
    opacity: 0;
}

.rmx-ecom-rhythms::after {
    left: auto;
    right: -7%;
    bottom: -34%;
    width: 62%;
    height: 122%;
    opacity: .24;
    background: url('https://romex.com.br/wp-content/uploads/2026/09/romex-ecommerce-asset-rede-logistica-neon-05.png') right bottom / contain no-repeat;
}

.rmx-ecom-rhythm-grid {
    gap: 16px;
}

.rmx-ecom-rhythm-grid article {
    min-height: 214px;
}

.rmx-ecom-rhythm-grid article:nth-child(3) {
    border-color: rgba(234,242,5,.78);
    background: linear-gradient(145deg, #C8D099, #909B3B);
    color: #111713;
    box-shadow: 0 18px 44px rgba(0,0,0,.16);
}

.rmx-ecom-rhythm-grid article:nth-child(3) h3,
.rmx-ecom-rhythm-grid article:nth-child(3) p {
    color: #111713;
}

.rmx-ecom-rhythm-grid article:nth-child(3) .rmx-ecom-icon {
    border-color: rgba(17,23,19,.16);
    background: rgba(255,255,255,.78);
}

.rmx-ecom-rhythm-grid article:nth-child(3):hover {
    border-color: rgba(255,255,255,.75);
    background: linear-gradient(145deg, #D6DCB3, #9AA44B);
}

/* Tecnologia: asset 07 fica exclusivo desta seção */
.rmx-ecom-tech-grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 70px;
}

.rmx-ecom-tech-copy {
    max-width: 520px;
}

.rmx-ecom-tech-visual {
    min-height: 380px;
    padding: 38px;
}

.rmx-ecom-tech-visual::before {
    background:
        url('https://romex.com.br/wp-content/uploads/2026/09/romex-ecommerce-asset-malha-ondas-logisticas-neon-07.png') right 14% bottom 12% / 70% auto no-repeat,
        repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 34px),
        repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 34px);
    opacity: .27;
}

/* Escala: painel visual e texto ocupam a mesma altura perceptiva */
.rmx-ecom-scale-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 70px;
}

.rmx-ecom-route-card {
    min-height: 370px;
}

.rmx-ecom-route-card img {
    max-height: 304px;
}

/* Perfis: elimina degraus e reforça a hierarquia numérica */
.rmx-ecom-segments-grid {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 70px;
}

.rmx-ecom-profile-grid {
    gap: 14px;
}

.rmx-ecom-profile-grid article:nth-child(2),
.rmx-ecom-profile-grid article:nth-child(4),
.rmx-ecom-profile-grid article:nth-child(2):hover,
.rmx-ecom-profile-grid article:nth-child(4):hover {
    transform: none;
}

.rmx-ecom-profile-grid article {
    min-height: 164px;
    padding: 23px 21px;
    border-top: 2px solid rgba(171,191,17,.58);
}

.rmx-ecom-profile-grid span {
    margin-bottom: 12px;
}

/* CTA: acabamento mais compacto e alinhado ao ritmo geral */
.rmx-ecom-cta {
    padding-top: 72px;
    padding-bottom: 88px;
}

.rmx-ecom-cta-inner {
    gap: 36px;
    padding: 38px 40px;
}

.rmx-ecom-cta-inner > div:first-child {
    max-width: 690px;
}

/* Celular: validação prioritária desta rodada */
@media (max-width: 620px) {
    .rmx-ecom-section {
        padding: 62px 0;
    }

    .rmx-ecom-heading {
        margin-bottom: 26px;
    }

    .rmx-ecom-heading h2,
    .rmx-ecom-split h2,
    .rmx-ecom-tech h2,
    .rmx-ecom-scale h2,
    .rmx-ecom-segments h2,
    .rmx-ecom-cta h2 {
        font-size: clamp(29px, 8.8vw, 36px);
        line-height: 1.045;
    }

    .rmx-ecom-hero-photo,
    .rmx-ecom-hero-photo img {
        min-height: 270px;
        height: 270px;
    }

    .rmx-ecom-hero-label {
        padding: 12px 13px;
    }

    .rmx-ecom-problem-grid article,
    .rmx-ecom-rhythm-grid article,
    .rmx-ecom-profile-grid article,
    .rmx-ecom-flow-grid article {
        min-height: 0;
    }

    .rmx-ecom-image-card,
    .rmx-ecom-image-card img {
        min-height: 280px;
        height: 280px;
    }

    .rmx-ecom-tech-visual,
    .rmx-ecom-route-card {
        min-height: 270px;
        padding: 24px;
    }

    .rmx-ecom-route-card img {
        max-height: 230px;
    }

    .rmx-ecom-rhythm-grid article:nth-child(3) {
        box-shadow: 0 14px 32px rgba(0,0,0,.12);
    }

    .rmx-ecom-cta {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .rmx-ecom-cta-inner {
        padding: 25px 21px;
    }
}


/* E-commerce v4.1 — fechamento responsivo mobile */
@media (max-width: 900px) {
    .rmx-ecom-split,
    .rmx-ecom-tech-grid,
    .rmx-ecom-scale-grid,
    .rmx-ecom-segments-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .rmx-ecom-solution-copy,
    .rmx-ecom-tech-copy {
        max-width: none;
    }
}

@media (max-width: 620px) {
    .rmx-ecom-split,
    .rmx-ecom-tech-grid,
    .rmx-ecom-scale-grid,
    .rmx-ecom-segments-grid {
        gap: 30px;
    }

    .rmx-ecom-image-card,
    .rmx-ecom-tech-visual,
    .rmx-ecom-route-card,
    .rmx-ecom-profile-grid {
        width: 100%;
    }
}


/* =========================
   E-commerce — contrato de viewport V1
   A hero preenche a primeira dobra sem crescer além dela em notebooks baixos.
   ========================= */
@media (min-width: 901px) {
    .rmx-ecom-hero.rmx-viewport-hero,
    .rmx-ecom-hero.rmx-viewport-hero .rmx-ecom-hero-grid {
        min-height: calc(100vh - var(--rmx-viewport-header-offset, 84px));
        min-height: calc(100dvh - var(--rmx-viewport-header-offset, 84px));
    }
}

@media (min-width: 901px) and (max-height: 900px) {
    .rmx-ecom-hero-grid {
        gap: clamp(30px, 4vw, 46px);
        padding-block: clamp(22px, 3.4dvh, 34px);
    }

    .rmx-ecom-h1 {
        font-size: clamp(38px, 5.8dvh, 54px);
        line-height: 1;
    }

    .rmx-ecom-lead {
        margin-top: 16px;
        font-size: clamp(15px, 1.9dvh, 17px);
        line-height: 1.45;
    }

    .rmx-ecom-hero-copy .rmx-btns {
        margin-top: 18px;
    }

    .rmx-ecom-hero-copy .rmx-btn {
        min-height: 44px;
        padding-block: 10px;
    }

    .rmx-ecom-hero-photo,
    .rmx-ecom-hero-photo img {
        min-height: 0;
        height: min(42dvh, 330px);
    }

    .rmx-ecom-hero-label {
        bottom: 12px;
        padding: 12px 14px;
    }
}

@media (min-width: 901px) and (max-height: 760px) {
    .rmx-ecom-hero-grid {
        gap: 28px;
        padding-block: 18px;
    }

    .rmx-ecom-h1 {
        font-size: clamp(34px, 5.5dvh, 46px);
    }

    .rmx-ecom-lead {
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.4;
    }

    .rmx-ecom-hero-copy .rmx-btns {
        margin-top: 14px;
    }

    .rmx-ecom-hero-photo,
    .rmx-ecom-hero-photo img {
        height: min(38dvh, 285px);
    }
}


/* =========================
   E-commerce — adaptador de viewport V2
   Preserva proporção visual e reorganiza a hero por altura.
   ========================= */
@media (min-width: 901px) {
    .rmx-ecom-hero.rmx-viewport-hero {
        height: calc(100vh - var(--rmx-viewport-header-offset, 84px));
        height: calc(100dvh - var(--rmx-viewport-header-offset, 84px));
        min-height: 520px;
        max-height: none;
    }

    .rmx-ecom-hero.rmx-viewport-hero .rmx-ecom-hero-grid {
        height: 100%;
        min-height: 0;
        box-sizing: border-box;
    }
}

@media (min-width: 901px) and (max-height: 900px) {
    .rmx-ecom-hero-grid {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
        gap: 40px;
        padding-block: 26px;
    }

    .rmx-ecom-h1 {
        font-size: clamp(44px, 3.55vw, 56px);
        line-height: .99;
    }

    .rmx-ecom-lead {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.48;
    }

    .rmx-ecom-hero-copy .rmx-btns {
        margin-top: 18px;
    }

    .rmx-ecom-hero-art {
        width: 100%;
        max-width: 620px;
        margin-left: auto;
        align-self: center;
    }

    .rmx-ecom-hero-photo {
        min-height: 0;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .rmx-ecom-hero-photo img {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
}

@media (min-width: 901px) and (max-height: 760px) {
    .rmx-ecom-hero-grid {
        gap: 30px;
        padding-block: 18px;
    }

    .rmx-ecom-h1 {
        font-size: clamp(42px, 3.3vw, 52px);
    }

    .rmx-ecom-lead {
        margin-top: 13px;
        line-height: 1.42;
    }

    .rmx-ecom-hero-copy .rmx-btns {
        margin-top: 14px;
    }

    .rmx-ecom-hero-art {
        max-width: 560px;
    }
}


/* ==========================================================
   E-COMMERCE — PALETA ROMEX V2
   ========================================================== */
.rmx-ecom-hero .rmx-eyebrow,
.rmx-ecom-title-line.is-accent,
.rmx-ecom-hero-label span,
.rmx-ecom-rhythms .rmx-eyebrow,
.rmx-ecom-cta .rmx-eyebrow {
    color: var(--ecom-green);
}

.rmx-ecommerce .rmx-eyebrow,
.rmx-ecom-flow-kicker,
.rmx-ecom-profile-grid span {
    color: var(--ecom-green-text);
}

.rmx-ecommerce .rmx-ecom-icon {
    border-color: rgba(144,155,59,.28);
    background: #EEF1E3;
}