.rmx-page,
.rmx-page * {
    box-sizing: border-box;
    font-family: 'Urbanist', Arial, sans-serif;
}

.rmx-page {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    color: var(--rmx-ink);
    background: var(--rmx-paper);
}

.rmx-page a { color: inherit; }
.rmx-page img { max-width: 100%; height: auto; }

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

.rmx-section {
    padding: 112px 0;
}

.rmx-section.is-soft { background: var(--rmx-soft); }
.rmx-section.is-dark {
    background: var(--rmx-deep);
    color: var(--rmx-paper);
}

.is-dark .rmx-eyebrow,
.rmx-dark-panel .rmx-eyebrow {
    color: var(--rmx-green);
}

.rmx-section-head {
    max-width: 820px;
    margin: 0 0 48px;
}

.rmx-section-head.is-centered {
    margin-inline: auto;
    text-align: center;
}

.rmx-eyebrow {
    margin: 0 0 14px;
    color: var(--rmx-green-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.rmx-title {
    margin: 0;
    font-size: clamp(38px, 4vw, 62px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.rmx-title.is-small {
    font-size: clamp(30px, 3vw, 46px);
}

.rmx-copy {
    max-width: 720px;
    margin: 20px 0 0;
    color: var(--rmx-muted);
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.65;
}

.is-dark .rmx-copy,
.rmx-dark-panel .rmx-copy {
    color: rgba(255,255,255,.76);
}

.rmx-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.rmx-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border: 1px solid var(--rmx-green);
    border-radius: 9px;
    background: var(--rmx-green);
    color: #111 !important;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.rmx-btn:hover {
    transform: translateY(-2px);
    background: var(--rmx-green-2);
    box-shadow: 0 10px 24px rgba(95,107,47,.18);
}

.rmx-btn.is-ghost {
    background: transparent;
    color: inherit !important;
}

.rmx-btn:focus-visible,
.rmx-page a:focus-visible {
    outline: 3px solid var(--rmx-green-text);
    outline-offset: 3px;
}

.rmx-card {
    border: 1px solid var(--rmx-line);
    border-radius: var(--rmx-radius-md);
    background: var(--rmx-paper);
    padding: 28px;
}

.rmx-card h3,
.rmx-card h4 {
    margin: 0;
    color: var(--rmx-ink);
}

.rmx-card p {
    margin: 12px 0 0;
    color: var(--rmx-muted);
    line-height: 1.6;
}

.rmx-dark-panel {
    border-radius: var(--rmx-radius-lg);
    background: var(--rmx-deep-2);
    color: var(--rmx-paper);
    padding: clamp(32px, 5vw, 64px);
}

.rmx-icon-wrap {
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(144,155,59,.32);
    border-radius: 50%;
    background: rgba(185,193,123,.14);
    color: var(--rmx-green);
    font-weight: 900;
}

.rmx-grid {
    display: grid;
    gap: 22px;
}

.rmx-grid > *,
.rmx-flex > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .rmx-section { padding: 88px 0; }
}

@media (max-width: 620px) {
    .rmx-shell { width: calc(100% - 28px); }
    .rmx-section { padding: 70px 0; }
    .rmx-btns { flex-direction: column; }
    .rmx-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rmx-page *,
    .rmx-page *::before,
    .rmx-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}


/* =========================
   PROTEÇÃO TIPOGRÁFICA GLOBAL
   Evita quebras indevidas de palavras em títulos, labels e CTAs.
   Termos compostos que não podem separar (ex.: e-commerce) usam .rmx-no-break.
   ========================= */
.rmx-page :where(h1, h2, h3, h4, h5, h6, .rmx-title, .rmx-eyebrow, .rmx-btn) {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.rmx-no-break {
    white-space: nowrap;
}


/* =========================
   GOVERNANÇA DE VIEWPORT
   A classe apenas fornece variáveis comuns.
   O encaixe real é responsabilidade do adaptador de cada hero.
   ========================= */
.rmx-viewport-hero {
    --rmx-viewport-header-offset: 84px;
    box-sizing: border-box;
}


/* =========================
   ROMEX PALETTE V2
   Verde vivo deixa de ser dominante; sálvia/oliva assumem a interface.
   ========================= */
.is-dark .rmx-eyebrow,
.rmx-dark-panel .rmx-eyebrow {
    color: var(--rmx-green-soft);
}