/* =============================================================
   Ramon Moreira 277 — Senador
   Landing page. Único CSS do tema: nada aqui depende do style40
   ou do ana-2026, que ficaram para trás com a campanha anterior.
   ============================================================= */

/* -------------------------------------------------------------
   1. Tokens
   As cores saíram do próprio logotipo (assets/ramon/logo-r277.png),
   então são as oficiais da marca, não uma aproximação de tela.
   ------------------------------------------------------------- */
:root {
    --rm-navy:        #001455;
    --rm-navy-deep:   #000A2E;
    --rm-blue:        #004DE1;
    --rm-blue-mid:    #2155D6;
    --rm-blue-elec:   #1F49FF;
    --rm-green:       #009656;
    --rm-yellow:      #FECC02;
    --rm-black:       #000000;
    --rm-white:       #FFFFFF;
    --rm-ink:         #1D1D1D;
    --rm-ink-soft:    #3C3C3C;

    --rm-shell:       1240px;
    --rm-gutter:      clamp(20px, 4vw, 48px);

    --rm-display: 'Archivo', 'Archivo Narrow', 'Arial Narrow', Impact, sans-serif;
    --rm-body:    'Open Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* eixo wdth do Archivo. Medido contra o comp: a relação
       avanço/altura-de-caixa da arte pede o extremo condensado do eixo. */
    --rm-display-wdth: 64;

    --rm-header-h: 50px;

    /* Medidas dos cards de proposta. Viram variáveis porque a largura da
       faixa é calculada a partir delas, para caber exatamente três.
       Os valores saíram do Layout.jpeg: medido nele, o card lateral ocupa
       14,5% da largura da tela e o destaque 19,4% — ou seja, o do meio é um
       terço mais largo que os dos lados, e é esse contraste que dá a
       hierarquia da arte.

       Sobre a medição do comp foi aplicado um aumento de 15% na largura,
       a pedido: a altura acompanha sozinha, porque sai da proporção da
       moldura logo abaixo — é mexer só nestes dois números para calibrar. */
    --rm-card-w:     clamp(198px, 20.3vw, 292px);
    --rm-card-w-big: clamp(242px, 24.5vw, 353px);
    --rm-card-gap:   clamp(10px, 2.2vw, 32px);

    /* proporção dos próprios arquivos de moldura (464x583 e 1106x1375).
       A altura do card sai daqui: com background-size 100% 100%, qualquer
       altura fora dessa proporção estica o bisel da arte. */
    --rm-card-prop:     calc(583 / 464);
    --rm-card-prop-big: calc(1375 / 1106);
}

/* -------------------------------------------------------------
   2. Base
   ------------------------------------------------------------- */
/* O tema não carrega mais Bootstrap, então o reset mínimo é daqui.
   Sem o border-box as larguras com padding (inputs, cards) estouram. */
*,
*::before,
*::after { box-sizing: border-box; }

body.ramon-lp {
    margin: 0;
    background: var(--rm-white);
    color: var(--rm-ink);
    font-family: var(--rm-body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.ramon-lp img { max-width: 100%; height: auto; }

.ramon-lp a { color: white; text-decoration: none; }
.ramon-lp a:hover { text-decoration: none; }

.ramon-lp :focus-visible {
    outline: 3px solid var(--rm-blue-elec);
    outline-offset: 3px;
}

.rm-shell {
    width: 100%;
    max-width: var(--rm-shell);
    margin-inline: auto;
    padding-inline: var(--rm-gutter);
}

.rm-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Tipografia de display: o Archivo é variável, então o itálico
   condensado sai do próprio arquivo — nada de skew falso. */
.rm-display {
    font-family: var(--rm-display);
    font-weight: 900;
    font-style: italic;
    font-stretch: 64%;
    font-variation-settings: 'wdth' var(--rm-display-wdth);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: .005em;
    margin: 0;
}

/* [PALAVRA] — os colchetes são decoração, então entram por CSS e
   não sujam o texto que o leitor de tela anuncia. */
.rm-brk::before,
.rm-brk::after {
    color: var(--rm-blue-elec);
    font-weight: 700;
    font-stretch: 100%;
    font-variation-settings: 'wdth' 100;
}
.rm-brk::before { content: "["; margin-right: .04em; }
.rm-brk::after  { content: "]"; margin-left: .04em; }

.rm-hl { color: var(--rm-blue-elec); }

/* Faixa verde/amarelo/azul que fecha o hero */
.rm-flagbar {
    height: clamp(9px, 1.1vw, 15px);
    background: linear-gradient(90deg,
        var(--rm-green)  0 32%,
        var(--rm-yellow) 32% 68%,
        var(--rm-blue)   68% 100%);
    box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .28),
                inset 0 3px 4px rgba(255, 255, 255, .28);
}

/* -------------------------------------------------------------
   3. Botão
   Reproduz a pílula 3D da arte com gradiente + anéis, em vez de
   usar o PNG: assim escala, aceita foco e continua sendo texto.
   ------------------------------------------------------------- */
.rm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .72em 2.8em;
    border: 2px solid #8FB4FF;
    border-radius: 999px;
    background: linear-gradient(180deg, #4C82FF 0%, #1147D6 46%, #04226F 100%);
    color: var(--rm-white);
    font-family: var(--rm-display);
    font-weight: 800;
    font-style: italic;
    font-stretch: 76%;
    font-variation-settings: 'wdth' 76;
    font-size: clamp(1.05rem, 2.05vw, 1.85rem);
    text-transform: uppercase;
    letter-spacing: .02em;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow:
        0 0 0 3px rgba(2, 14, 55, .95),
        0 0 0 5px rgba(120, 160, 255, .55),
        0 10px 26px rgba(0, 0, 0, .45),
        inset 0 2px 0 rgba(255, 255, 255, .45),
        inset 0 -8px 18px rgba(0, 0, 0, .35);
}
.rm-btn:hover {
    text-decoration: none;
    color: var(--rm-white);
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow:
        0 0 0 3px rgba(2, 14, 55, .95),
        0 0 0 5px rgba(150, 185, 255, .75),
        0 14px 32px rgba(0, 40, 140, .55),
        inset 0 2px 0 rgba(255, 255, 255, .5),
        inset 0 -8px 18px rgba(0, 0, 0, .3);
}
/* O `.ramon-lp a` da base tem especificidade maior que a do `.rm-btn`, então
   um botão feito em <a> saía com o rótulo azul em vez de branco. Só aparecia
   nas páginas legais: na home o botão é o PNG, e lá o texto é .rm-sr-only. */
.ramon-lp a.rm-btn,
.ramon-lp a.rm-btn:hover,
.ramon-lp a.rm-btn:focus-visible { color: var(--rm-white); }

.rm-btn:active { transform: translateY(0); }
.rm-btn:disabled { opacity: .6; cursor: progress; transform: none; }

/* Variante em arte: o PNG oficial da campanha no lugar da pílula desenhada
   em CSS. No PNG o rótulo é pixel, não texto, então ele continua no HTML
   dentro de um .rm-sr-only — é de lá que sai o nome acessível do botão.
   A proporção 483/96 é a do próprio arquivo, já sem as margens vazias. */
.rm-btn--img {
    position: relative;
    width: min(78%, 430px);
    aspect-ratio: 483 / 96;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: url('../ramon/botao-quero-fazer-parte-verde.png') center / contain no-repeat;
    box-shadow: none;
    text-shadow: none;
}

.rm-btn--img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../ramon/botao-quero-fazer-parte.png') center / contain no-repeat;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.rm-btn--img:hover,
.rm-btn--img:focus-visible {
    filter: none;
    transform: translateY(-2px);
    box-shadow: none;
}

.rm-btn--img:hover::after,
.rm-btn--img:focus-visible::after { opacity: 1; }

.rm-btn--img:active { transform: translateY(0); }

.rm-btn--img:disabled {
    filter: grayscale(.4);
    opacity: .65;
    transform: none;
}

/* -------------------------------------------------------------
   4. Cabeçalho
   ------------------------------------------------------------- */
.rm-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--rm-white);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .13);
}

.rm-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .26); }

.rm-header__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 6vw, 88px);
    min-height: var(--rm-header-h);
    padding-block: 7px;
}

.rm-header__logo { flex: 0 0 auto; line-height: 0; }
.rm-header__logo img {
    width: clamp(128px, 13.2vw, 190px);
    display: block;
}

.rm-nav { flex: 0 1 auto; }

.rm-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3.9vw, 62px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rm-nav a {
    display: block;
    color: var(--rm-navy);
    font-family: var(--rm-display);
    font-weight: 800;
    font-style: italic;
    font-stretch: 70%;
    font-variation-settings: 'wdth' 70;
    font-size: clamp(1rem, 1.55vw, 1.42rem);
    text-transform: uppercase;
    letter-spacing: .02em;
    padding-block: 6px;
    border-bottom: 3px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.rm-nav a:hover,
.rm-nav .current-menu-item > a {
    color: var(--rm-blue);
    border-bottom-color: var(--rm-blue);
    text-decoration: none;
}

.rm-burger {
    display: none;
    margin-left: auto;
    width: 42px; height: 42px;
    border: 0;
    border-radius: 8px;
    background: var(--rm-navy);
    color: var(--rm-white);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Menu mobile */
.rm-mobile {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 26px var(--rm-gutter) 46px;
    background: var(--rm-navy-deep);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s ease, visibility .32s ease;
}
.rm-mobile.is-open { transform: translateX(0); visibility: visible; }

.rm-mobile__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rm-mobile__top img { width: 132px; }

.rm-mobile__close {
    width: 46px; height: 46px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    color: var(--rm-white);
    font-size: 1.3rem;
    cursor: pointer;
}

.rm-mobile ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0; padding: 0;
    list-style: none;
}
.rm-mobile a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: var(--rm-white);
    font-family: var(--rm-display);
    font-weight: 800;
    font-style: italic;
    font-stretch: 70%;
    font-variation-settings: 'wdth' 70;
    font-size: 1.5rem;
    text-transform: uppercase;
}
.rm-mobile a:hover { color: #7FA8FF; text-decoration: none; }

.rm-social {
    display: flex;
    gap: 14px;
}
.rm-social a {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    color: var(--rm-white);
    font-size: 1.05rem;
}
.rm-social a:hover {
    background: var(--rm-blue);
    border-color: var(--rm-blue);
    text-decoration: none;
}

/* -------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------- */
.rm-hero {
    position: relative;
    background: #000 url('../ramon/hero-ramon.png') left bottom / auto 100% no-repeat;
}

/* Sem isto o formulário disputa contraste com o brilho azul da arte
   nas larguras em que a foto avança para a direita. */
.rm-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0) 42%,
        rgba(0, 0, 0, .55) 62%,
        rgba(0, 0, 0, .82) 100%);
    pointer-events: none;
}

.rm-hero__art { display: none; }

.rm-hero__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr minmax(390px, 48%);
    align-items: center;
    gap: 32px;
    min-height: clamp(540px, 54.5vw, 780px);
    padding-block: 56px;
}

.rm-hero__form { color: var(--rm-white); }

.rm-hero__title {
    font-size: clamp(1.9rem, 3.4vw, 3.15rem);
    color: var(--rm-white);
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .6);
    margin-bottom: .55em;
}

.rm-hero__intro {
    max-width: 46ch;
    margin: 0 auto 1.9em;
    text-align: center;
    font-size: clamp(.92rem, 1.15vw, 1.02rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, .93);
}

.rm-form { display: flex; flex-direction: column; gap: 12px; }

.rm-input {
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 3px;
    background: var(--rm-white);
    color: var(--rm-ink);
    font-family: var(--rm-body);
    font-size: 1rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .16);
}
.rm-input::placeholder { color: #6E6E6E; opacity: 1; }

.rm-form .rm-btn { align-self: center; margin-top: 16px; }

.rm-form__msg {
    min-height: 1.4em;
    margin: 6px 0 0;
    text-align: center;
    font-size: .92rem;
    font-weight: 600;
    color: #9FD2FF;
}
.rm-form__msg.is-error { color: #FFB4B4; }

/* -------------------------------------------------------------
   6. Experiência
   ------------------------------------------------------------- */
.rm-exp { padding-block: clamp(56px, 7vw, 96px); }

.rm-exp__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
}

.rm-exp__title {
    font-size: clamp(1.85rem, 4.75vw, 4.25rem);
    color: var(--rm-navy);
}

.rm-prose p {
    margin: 0 0 1.05em;
    text-align: justify;
    hyphens: auto;
    font-size: clamp(.9rem, 1.05vw, .98rem);
    line-height: 1.78;
    color: var(--rm-ink-soft);
}
.rm-prose p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------
   7.5. Vídeo
   Faixa cheia, no desenho da arte: fundo azul-escuro com o brilho
   central, colchete gigante nas duas pontas e, no meio, o ícone da
   campanha servindo de botão de play com as setas apontando para
   ele. No clique a capa escurece, a seção cresce e o player em pé
   abre por cima. Tudo por classe .is-playing — o JS só liga e
   desliga a classe.
   ------------------------------------------------------------- */
.rm-video {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(26px, 5.4vw, 104px);
    /* o recuo lateral abre espaço para o colchete: menos que a
       largura do braço e a arte encostaria nele */
    padding: clamp(56px, 9vw, 172px) clamp(76px, 9.4vw, 180px) clamp(48px, 7vw, 134px);
    min-height: clamp(320px, 31.9vw, 620px);
    overflow: hidden;
    background: var(--rm-black) url('../ramon/video-fundo.png') center / cover no-repeat;
    transition: min-height .45s ease;
}

/* --- o colchete da faixa ---
   Desenhado com borda, como o dos pilares: acompanha a altura real
   da seção, que muda quando o vídeo abre. */
.rm-video::before,
.rm-video::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: clamp(52px, 8.2vw, 158px);
    border: clamp(18px, 2.9vw, 55px) solid var(--rm-blue);
    pointer-events: none;
}
.rm-video::before { left: 0;  border-right: 0; }
.rm-video::after  { right: 0; border-left: 0;  }

/* --- botão de play: o próprio ícone da campanha --- */
.rm-video__play {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.8vw, 54px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform .3s ease, filter .3s ease, opacity .35s ease;
}
.rm-video__play:hover,
.rm-video__play:focus-visible { transform: scale(1.05); filter: brightness(1.08); }
.rm-video__play:active { transform: scale(.99); }

.rm-video__icone {
    width: clamp(104px, 9.8vw, 188px);
    height: auto;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .55));
}

/* --- as setas ---
   Recortadas em clip-path em vez de PNG: assim escalam sem borrar e
   o lado direito é o mesmo elemento espelhado. A opacidade cresce em
   direção ao ícone, que é para onde o olho deve ir. */
.rm-video__setas {
    display: flex;
    align-items: center;
    gap: clamp(3px, .42vw, 8px);
}
.rm-video__setas--espelhada { transform: scaleX(-1); }

.rm-video__setas i {
    width: clamp(22px, 2.3vw, 44px);
    aspect-ratio: 22 / 39;
    background: var(--rm-blue-elec);
    clip-path: polygon(0 0, 38% 0, 100% 50%, 38% 100%, 0 100%, 62% 50%);
    opacity: var(--rm-seta-o, 1);
    animation: rm-seta 2.4s ease-in-out infinite;
}
.rm-video__setas i:nth-child(1) { --rm-seta-o: .26; animation-delay: 0s;   }
.rm-video__setas i:nth-child(2) { --rm-seta-o: .45; animation-delay: .18s; }
.rm-video__setas i:nth-child(3) { --rm-seta-o: .68; animation-delay: .36s; }
.rm-video__setas i:nth-child(4) { --rm-seta-o: 1;   animation-delay: .54s; }

@keyframes rm-seta {
    0%, 100% { opacity: var(--rm-seta-o, 1); }
    50%      { opacity: calc(var(--rm-seta-o, 1) * .42); }
}

/* --- chamada, embaixo do ícone --- */
.rm-video__text {
    position: relative;
    z-index: 3;
    margin: 0;
    text-align: center;
    color: var(--rm-white);
    font-size: clamp(1.05rem, 2.42vw, 2.9rem);
    text-shadow: 0 6px 26px rgba(0, 0, 0, .6);
    transition: opacity .35s ease;
}

/* --- player ---
   box-sizing content-box de propósito: o aspect-ratio vale para a
   imagem, e a moldura (padding + borda) cresce por fora, sem tarja. */
.rm-video__player {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 4;
    box-sizing: content-box;
    width: min(88vw, 1040px);
    aspect-ratio: 16 / 9;
    padding: 10px;
    border: 3px solid rgba(255, 255, 255, .88);
    border-radius: 18px;
    background: rgba(255, 255, 255, .1);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .35s ease, transform .35s ease;
}

/* Vídeo em pé (o reel é 1080x1920): a moldura vira retrato e a medida
   que manda passa a ser a altura, senão o player estoura a seção. O
   128vw segura a largura no celular, onde 72vh ainda seria largo. */
.rm-video--retrato .rm-video__player {
    width: auto;
    height: min(72vh, 700px, 128vw);
    aspect-ratio: 9 / 16;
    border-radius: 22px;
}

/* A faixa da arte é baixa e o vídeo em pé é bem mais alto que ela: com
   overflow:hidden a moldura ficaria cortada. Em vez de deixar a seção
   sempre alta e furar o desenho, ela cresce só enquanto toca. */
.rm-video--retrato.is-playing { min-height: min(94vh, 900px); }

/* o object-fit evita tarja preta se o arquivo trocado um dia não for 9:16 */
video.rm-video__player { display: block; object-fit: cover; background: #000; }

/* cortina: durante a reprodução a capa sai da frente da cena */
.rm-video__cortina {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 6, 28, .86);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.rm-video__close {
    position: absolute;
    /* abaixo do cabeçalho fixo: no topo da seção o botão ficava atrás dele */
    top: clamp(62px, 7vw, 86px);
    right: clamp(10px, 1.6vw, 22px);
    z-index: 5;
    width: 42px; height: 42px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(0, 6, 28, .7);
    color: var(--rm-white);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .2s ease;
}
.rm-video__close:hover { transform: scale(1.08); }

.rm-video.is-playing .rm-video__cortina { opacity: 1; }

.rm-video.is-playing .rm-video__player {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.rm-video.is-playing .rm-video__close { opacity: 1; pointer-events: auto; }

.rm-video.is-playing .rm-video__play,
.rm-video.is-playing .rm-video__text { opacity: 0; pointer-events: none; }


/* -------------------------------------------------------------
   7. Quem eu sou
   ------------------------------------------------------------- */
.rm-sou { padding-bottom: clamp(48px, 6vw, 84px); }

/* No comp a colagem ocupa ~49% da faixa de conteúdo e o texto corre numa
   coluna estreita e justificada — não é meio a meio. */
.rm-sou__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.rm-sou__art { line-height: 0; }
.rm-sou__art img { width: 100%; display: block; }

.rm-sou__title {
    font-size: clamp(1.7rem, 4.25vw, 3.8rem);
    color: var(--rm-navy);
    margin-bottom: .7em;
}

/* -------------------------------------------------------------
   8. Pilares — os três colchetes
   ------------------------------------------------------------- */
.rm-pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 3.5vw, 52px);
    padding-block: clamp(44px, 5.5vw, 76px);
}

.rm-pilar {
    position: relative;
    padding: clamp(14px, 1.8vw, 24px) clamp(30px, 3.4vw, 46px);
    text-align: center;
}

/* o colchete é desenhado com borda: acompanha a altura real do card,
   coisa que um PNG esticado não faz sem deformar a espessura */
.rm-pilar::before,
.rm-pilar::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(20px, 2.33vw, 34px);
    border: 6px solid var(--rm-blue-elec);
    transform: scaleY(var(--rm-brk, 1));
    transform-origin: center;
}
.rm-pilar::before { left: 0;  border-right: 0; }
.rm-pilar::after  { right: 0; border-left: 0;  }

.rm-pilar__title {
    font-size: clamp(1.15rem, 1.9vw, 1.62rem);
    color: var(--rm-black);
    margin-bottom: .45em;
}

.rm-pilar p {
    margin: 0;
    font-size: clamp(.85rem, 1.02vw, .95rem);
    line-height: 1.55;
    color: var(--rm-ink-soft);
}

/* -------------------------------------------------------------
   9. Mural — o que já fiz
   Grid de 12 colunas replicando o mosaico da arte, célula a célula.
   ------------------------------------------------------------- */
.rm-mural {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.rm-mural__cell {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(210px, 21vw, 320px);
    padding: clamp(18px, 2.3vw, 38px);
}

.rm-mural__cell--wide { grid-column: span 6; text-align: center; align-items: center; }

.rm-mural__cell--black { background: var(--rm-black); color: var(--rm-white); }
.rm-mural__cell--blue  { background: var(--rm-blue);  color: var(--rm-white); }
.rm-mural__cell--white { background: var(--rm-white); color: var(--rm-ink); }

/* A foto P&B é quadrada e a célula é deitada, então o cover sempre corta
   na vertical. Como o topo da cabeça começa a 1,8% da altura do arquivo,
   ancorar no topo é o que impede o corte — a sobra sai por baixo. */
.rm-mural__cell--photo {
    padding: 0;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}

/* O recorte P&B é um pouco mais deitado que a célula, então ainda sobra
   corte na horizontal. Ancorado à direita, o que sai é o fundo cinza vazio
   da esquerda — não o braço dele. */
.rm-mural__cell--photo-pb { background-position: right top; }

.rm-mural__title {
    font-size: clamp(1.3rem, 2.1vw, 1.9rem);
    margin-bottom: .7em;
}
.rm-mural__cell--black .rm-mural__title { color: var(--rm-white); }
.rm-mural__cell--blue  .rm-mural__title { color: var(--rm-white); }
.rm-mural__cell--white .rm-mural__title { color: var(--rm-blue-elec); }

.rm-mural p {
    margin: 0;
    text-align: justify;
    hyphens: auto;
    font-size: clamp(.78rem, .95vw, .9rem);
    line-height: 1.55;
}

.rm-mural__cell--wide .rm-mural__title { font-size: clamp(1.4rem, 2.35vw, 2.1rem); }
.rm-mural__cell--wide p { text-align: left; max-width: 52ch; }

/* célula só de ícone, entre colchetes */
.rm-mural__icon {
    position: relative;
    display: grid;
    place-items: center;
    align-self: center;
    padding: clamp(16px, 2vw, 30px) clamp(34px, 4vw, 62px);
}
.rm-mural__icon::before,
.rm-mural__icon::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: clamp(24px, 2.84vw, 41px);
    border: 7px solid var(--rm-blue-elec);
    transform: scaleY(var(--rm-brk, 1));
    transform-origin: center;
}
.rm-mural__icon::before { left: 0;  border-right: 0; }
.rm-mural__icon::after  { right: 0; border-left: 0;  }
.rm-mural__icon img {
    width: clamp(78px, 9vw, 132px);
    display: block;

    /* Volume. São PNGs recortados, então o drop-shadow acompanha o contorno
       da peça — um box-shadow seguiria a caixa e apareceria como retângulo.
       São três camadas: contato curto e escuro logo abaixo da peça, sombra
       longa que a solta do fundo preto da célula, e o brilho azul da arte,
       que é o que faz a peça parecer iluminada e não colada. */
    filter:
        drop-shadow(0 2px 3px rgba(0, 0, 0, .6))
        drop-shadow(0 16px 24px rgba(0, 0, 0, .7))
        drop-shadow(0 0 28px rgba(31, 73, 255, .45));

    /* o giro em X/Y vem do ramon-anim.js; sem estas duas linhas o navegador
       achata a rotação e ela vira um simples achatamento horizontal */
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* a perspectiva mora no pai: assim os dois ícones giram com o mesmo ponto
   de fuga, e não cada um com o seu */
.rm-mural__icon { perspective: 900px; }

.rm-mural__logos {
    align-self: center;
    margin: 0 auto;
    width: clamp(120px, 13vw, 190px);
    display: block;
}

/* -------------------------------------------------------------
   10. Propostas
   ------------------------------------------------------------- */
.rm-propostas {
    position: relative;
    background: var(--rm-navy-deep) url('../ramon/bg-techno.png') center / cover no-repeat;
    color: var(--rm-white);
    padding-block: clamp(48px, 6vw, 84px);
    overflow: hidden;
}

.rm-propostas__title {
    text-align: center;
    font-size: clamp(2.2rem, 4.8vw, 4.1rem);
    color: var(--rm-white);
    margin-bottom: clamp(30px, 4vw, 56px);
    text-shadow: 0 4px 22px rgba(0, 0, 0, .55);
}
.rm-propostas__title .rm-brk::before { margin-right: .12em; }
.rm-propostas__title .rm-brk::after  { margin-left: .12em; }

.rm-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.2vw, 32px);
    /* Sai da .rm-shell. Três cards mais duas setas passam de 1260px, e o
       miolo da shell tem 1144 — dentro dela a faixa cortava o card da ponta.
       O 50% é a metade do conteúdo da shell, que já está centrado na tela,
       então a conta centra o bloco na página. É o único da home que não
       obedece à medida de texto: os outros são coluna, este é arte. */
    --rm-carousel-w: min(1300px, 100vw);
    width: var(--rm-carousel-w);
    margin-inline: calc(50% - var(--rm-carousel-w) / 2);
}

.rm-carousel__arrow {
    flex: 0 0 auto;
    width: clamp(46px, 7.1vw, 102px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}
.rm-carousel__arrow img { display: block; width: 100%; }
.rm-carousel__arrow--prox img { transform: scaleX(-1); }
.rm-carousel__arrow:hover:not(:disabled) { transform: scale(1.08); }
.rm-carousel__arrow:disabled { opacity: .38; cursor: default; }

.rm-carousel__track {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: var(--rm-card-gap);
    /* três cards por vez, como no comp: dois normais + o destaque no meio.
       O quarto fica fora da faixa e se alcança pelas setas. */
    max-width: calc(var(--rm-card-w) * 2 + var(--rm-card-w-big) + var(--rm-card-gap) * 2);
    /* hidden, não auto: aqui o trio é a regra do desenho e quem anda é o
       destaque, não a rolagem. Rolar na mão pararia entre duas paradas e
       deixaria o card grande fora do meio. O scrollTo do JS continua
       funcionando — overflow:hidden ainda é um container de rolagem. */
    overflow-x: hidden;
    scrollbar-width: none;
    padding-block: 10px;
}
.rm-carousel__track::-webkit-scrollbar { display: none; }

.rm-proposta {
    flex: 0 0 auto;
    /* O encaixe é pela borda esquerda, não pelo centro: centralizar um card
       no meio de uma faixa com larguras diferentes deixava o vizinho cortado
       na borda. Com start, a faixa sempre começa num card inteiro. */
    scroll-snap-align: start;
    width: var(--rm-card-w);
    /* piso, não trava: se um texto crescer, o card acompanha em vez de
       vazar por cima da moldura */
    min-height: calc(var(--rm-card-w) * var(--rm-card-prop));
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 100% 100% estica a moldura junto com o conteúdo: é um retângulo
       arredondado, então o bisel não deforma de forma perceptível */
    /* com a moldura aparada, o interior chapado vai de 11,4% a 93,5% da
       largura (medido no arquivo); 13% de recuo cobre os dois lados */
    padding: clamp(26px, 2.6vw, 34px) clamp(24px, 3.6vw, 52px);
    background: url('../ramon/card-proposta.png') center / 100% 100% no-repeat;
    text-align: center;
}

/* a do meio é a âncora do bloco na arte: entra maior e com a moldura
   de maior resolução, senão o upscale aparece */
.rm-proposta--destaque {
    width: var(--rm-card-w-big);
    min-height: calc(var(--rm-card-w-big) * var(--rm-card-prop-big));
    background-image: url('../ramon/card-proposta-grande.png');
    /* o recuo aqui é menor que o do card lateral de propósito: a moldura
       grande é outro arquivo, com o miolo chapado proporcionalmente mais
       largo — e a coluna precisa da medida para não sair hifenizada */
    padding: clamp(32px, 3.4vw, 45px) clamp(28px, 3.6vw, 50px);
}

/* a moldura maior pede tipografia maior junto: no comp o título do card do
   meio é visivelmente mais alto que o dos laterais, não só o card. O corpo
   fica igual ao dos laterais — a hierarquia do meio já vem do título, da
   moldura e do tamanho do card. */
.rm-proposta--destaque .rm-proposta__title { font-size: calc(var(--rm-card-w) * .0822); }

.rm-proposta__title {
    font-size: calc(var(--rm-card-w) * .0712);
    color: var(--rm-white);
    /* no comp há um respiro claro entre o título e o texto; sem ele os dois
       blocos se colam e o card perde o ritmo da arte */
    margin-bottom: 1.05em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

.rm-proposta p {
    margin: 0;
    /* 17px na tela cheia (a 1440px+ o card mede 265). O corpo sai da largura
       do card, e não da viewport, pelo mesmo motivo que a altura mínima: com
       um valor em vw o número de linhas mudava conforme a tela e o texto
       estourava o min-height, esticando a moldura — que é arte, não caixa. */
    font-size: calc(var(--rm-card-w) * .0582);
    line-height: 1.45;
    color: rgba(255, 255, 255, .95);
    /* Centralizado, não justificado. O comp justifica, mas com tipo menor: a
       17px a coluna do card lateral tem menos de 200px e cabem ~19 caracteres
       por linha — poucas palavras para a justificação distribuir a sobra, que
       virava buraco entre elas.

       A hifenização fica, porque sem ela o parágrafo mais longo ganha uma
       linha e estoura a moldura; centralizado ela não abre espaço nenhum, só
       quebra a palavra. O limite corta as quebras que não valiam o hífen —
       "fir-mes", "re-forma" — deixando só palavras de 8 letras ou mais. */
    text-align: center;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

/* -------------------------------------------------------------
   11. Compromisso
   ------------------------------------------------------------- */
.rm-compromisso {
    text-align: center;
    padding-top: clamp(38px, 5vw, 72px);
}

.rm-compromisso__title {
    font-size: clamp(1.15rem, 2.4vw, 2.05rem);
    color: var(--rm-white);
    margin-bottom: .8em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .55);
}

.rm-compromisso p {
    max-width: 92ch;
    margin: 0 auto;
    font-size: clamp(.85rem, 1.05vw, .97rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}

.rm-compromisso .rm-btn { margin-top: 30px; }

/* -------------------------------------------------------------
   12. Faixa de fechamento
   ------------------------------------------------------------- */
.rm-fecho {
    background: var(--rm-white);
    padding-block: clamp(30px, 4vw, 56px);
}

.rm-fecho__inner {
    display: flex;
    align-items: center;
    gap: clamp(22px, 4vw, 60px);
}

.rm-fecho__logo {
    flex: 0 0 auto;
    width: clamp(108px, 13vw, 178px);
}

.rm-fecho__text {
    font-size: clamp(1.35rem, 3.2vw, 2.75rem);
    color: var(--rm-navy);
}
.rm-fecho__text > span { display: block; }

/* -------------------------------------------------------------
   13. Rodapé
   ------------------------------------------------------------- */
.rm-footer {
    background: var(--rm-navy-deep);
    color: rgba(255, 255, 255, .82);
    padding-block: clamp(38px, 4.5vw, 60px);
    font-size: .88rem;
    text-align: center;
}

.rm-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.rm-footer__logo { width: clamp(130px, 14vw, 176px); }

.rm-footer .rm-social { justify-content: center; }

.rm-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}
.rm-footer__links a { color: rgba(255, 255, 255, .82); }
.rm-footer__links a:hover { color: var(--rm-white); }

/* linha eleitoral obrigatória: fica um degrau acima do resto da letra
   miúda do rodapé, para ser legível sem competir com a marca */
.rm-footer__eleitoral {
    margin: 0;
    max-width: 62ch;
    font-size: .86rem;
    font-weight: 600;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.rm-footer__legal,
.rm-footer__copy {
    margin: 0;
    max-width: 70ch;
    font-size: .82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);
}

/* -------------------------------------------------------------
   14. Páginas internas (post, página, arquivo)
   ------------------------------------------------------------- */
.rm-page { padding-block: clamp(48px, 6vw, 88px); }

.rm-page__title {
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    color: var(--rm-navy);
    margin-bottom: .8em;
}

.rm-page__content { max-width: 74ch; }
.rm-page__content h2,
.rm-page__content h3 {
    font-family: var(--rm-display);
    font-weight: 800;
    font-style: italic;
    font-stretch: 72%;
    font-variation-settings: 'wdth' 72;
    text-transform: uppercase;
    color: var(--rm-navy);
    margin: 1.8em 0 .6em;
}
.rm-page__content h2 { font-size: 1.5rem; }
.rm-page__content h3 { font-size: 1.2rem; }
.rm-page__content p,
.rm-page__content li { line-height: 1.78; color: var(--rm-ink-soft); }

/* -------------------------------------------------------------
   15. Responsivo
   ------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rm-hero__grid { grid-template-columns: 1fr minmax(340px, 52%); }
}

@media (max-width: 960px) {
    .rm-nav { display: none; }
    .rm-burger { display: block; }

    /* No mobile a arte vira imagem de topo: como bg cortado, ou a foto
       ou o logotipo sempre ficava fora do enquadramento. */
    .rm-hero { background-image: none; background: linear-gradient(180deg, #020A28 0%, #000 100%); }
    .rm-hero::after { display: none; }
    /* A arte é 1620x961 com o Ramon no terço esquerdo e o resto do quadro
       vazio — é onde o formulário entra no desktop. Reduzida inteira para a
       largura do celular, ela vira uma tarja baixa com ele minúsculo e meia
       tela de fundo preto. Aqui ela é recortada: a proporção quadrada força
       o cover a escalar pela altura, então a figura aparece de corpo
       inteiro e o que sai do quadro é o vazio da direita. */
    .rm-hero__art {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        max-height: 62vh;
        object-fit: cover;
        /* 10% aproxima o recorte da figura; bottom preserva o logotipo,
           que fica na base da arte, se a altura for limitada pelo 62vh */
        object-position: 10% bottom;
    }
    .rm-hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-block: 34px 46px;
    }

    .rm-exp__grid,
    .rm-sou__grid { grid-template-columns: 1fr; }

    /* Empilhado, o gap da grade vira a distância entre a colagem e o título
       — e ele foi calibrado como calha entre colunas, não como respiro
       vertical. Com o line-height 1.02 do display, a caixa do título quase
       não sobra acima da letra, então 32px liam como uns 20 e a arte ficava
       encostada. O row-gap próprio acompanha o título, que aqui cresce de
       27 a 41px conforme a tela. */
    .rm-sou__grid { row-gap: clamp(44px, 9vw, 80px); }

    .rm-sou__art { max-width: 520px; margin-inline: auto; }

    .rm-pilares { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }

    /* na faixa estreita o colchete come metade da largura: encolhe o
       braço para o ícone e a chamada continuarem no meio */
    .rm-video::before,
    .rm-video::after { width: clamp(30px, 6vw, 60px); border-width: clamp(12px, 2.4vw, 22px); }

    .rm-mural__cell,
    .rm-mural__cell--wide { grid-column: span 6; }

    .rm-fecho__inner { flex-direction: column; text-align: center; }
}

@media (max-width: 760px) {
    .rm-carousel__track {
        justify-content: flex-start;
        scroll-padding-inline: 50%;
        /* aqui cabe um card por vez: não há meio para destacar, então a
           faixa volta a ser rolagem — e o dedo precisa dela */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    /* na faixa estreita o destaque não cabe maior: iguala pra não cortar */
    .rm-carousel__track { max-width: none; }

    .rm-proposta,
    .rm-proposta--destaque {
        /* Largura da própria faixa, não um valor em vw.
           As setas e as margens comem a largura da tela antes da faixa: a
           384px de tela sobravam 238px de faixa para um card de 280px, e o
           card ficava cortado dos dois lados o tempo todo — nenhuma rolagem
           conseguia centralizar o que era mais largo que o trilho. */
        width: 100%;

        /* a altura sai da proporção da moldura, como no desktop. Sendo item
           de flex, o min-height automático deixa o card crescer sozinho se
           algum texto pedir mais do que a proporção comporta. */
        aspect-ratio: 464 / 583;
        min-height: auto;

        /* o recuo vertical maior mantém o texto dentro da parte chapada da
           moldura: a caixa do card é maior que o miolo liso da arte */
        padding: clamp(28px, 8vw, 42px) clamp(22px, 6vw, 34px);
        background-image: url('../ramon/card-proposta.png');
    }

    /* alinhamento e hifenização já vêm assim da base; aqui muda só a
       medida, que no celular sai da tela e não da largura do card */
    .rm-proposta p {
        font-size: clamp(15px, 4vw, 17px);
        line-height: 1.5;
    }

    .rm-proposta__title { font-size: clamp(1.05rem, 4.4vw, 1.3rem); }
}

@media (max-width: 600px) {
    .rm-mural__cell,
    .rm-mural__cell--wide { grid-column: span 12; min-height: 0; }
    .rm-mural__cell--photo { min-height: 260px; }
    .rm-mural p, .rm-mural__cell--wide p { text-align: left; max-width: none; }
    .rm-mural__cell--wide { text-align: left; align-items: stretch; }

    .rm-hero__title { font-size: clamp(1.55rem, 7.6vw, 2.1rem); }

    /* quatro setas de cada lado não cabem sem espremer o ícone:
       ficam as duas mais próximas dele, que são as que guiam o olho */
    .rm-video__setas i:nth-child(1),
    .rm-video__setas i:nth-child(2) { display: none; }
    .rm-prose p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    /* O ramon-anim.js marca <html class="rm-anim-forcada"> quando assume a
       página: sem esta guarda, o bloco abaixo zeraria as transições de hover
       e as peças que o próprio script cria. */
    html:not(.rm-anim-forcada) .ramon-lp *,
    html:not(.rm-anim-forcada) .ramon-lp *::before,
    html:not(.rm-anim-forcada) .ramon-lp *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------------------------------------------------
   16. Páginas legais (política de privacidade, termos de uso)
   ------------------------------------------------------------- */
.rm-legal {
    background: var(--rm-navy-deep);
    padding-bottom: clamp(50px, 6vw, 110px);
}

.rm-legal__hero {
    position: relative;
    overflow: hidden;
    /* o gradiente termina na cor do corpo da página: o cabeçalho não tem
       borda, ele se dissolve no fundo, e o card branco entra por cima */
    background: linear-gradient(180deg,
        var(--rm-navy)      0%,
        #062070           52%,
        var(--rm-navy-deep) 100%);
    padding: clamp(110px, 13vw, 200px) 0 clamp(34px, 4vw, 72px);
}

.rm-legal__hero .rm-shell { position: relative; z-index: 2; }

.rm-legal__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8FB4FF;
    text-decoration: none;
    margin-bottom: clamp(14px, 1.6vw, 24px);
    transition: opacity .2s ease;
}

.rm-legal__back:hover,
.rm-legal__back:focus-visible { opacity: .7; color: #8FB4FF; }

/* olho acima do título: a palavra que diz de que tipo de página se trata,
   antes do nome dela */
.rm-legal__kicker {
    margin: 0 0 clamp(6px, .8vw, 12px);
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rm-blue-elec);
}

.rm-legal__title {
    font-size: clamp(38px, 6.4vw, 108px);
    color: #8FB4FF;
    margin: 0;
}

.rm-legal__updated {
    margin: clamp(12px, 1.5vw, 22px) 0 0;
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .72);
}

/* --- corpo --- */
.rm-legal__card {
    max-width: 940px;
    margin: clamp(-30px, -2.6vw, -18px) auto 0;
    position: relative;
    z-index: 3;
    background: var(--rm-white);
    border-radius: 26px;
    padding: clamp(26px, 4vw, 70px);
    color: #16224A;
}

/* o parágrafo de abertura resume a página inteira; o filete o separa do
   texto corrido sem precisar de caixa nem de fundo */
.rm-legal__lead {
    border-left: 4px solid var(--rm-blue-elec);
    padding-left: clamp(16px, 1.8vw, 26px);
    font-size: clamp(15px, 1.32vw, 20px);
    line-height: 1.72;
    font-weight: 500;
    color: #16224A;
    margin: 0 0 clamp(26px, 3.2vw, 44px);
}

/* --- sumário --- */
.rm-legal__toc {
    background: #EAF0FF;
    border-radius: 18px;
    padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.6vw, 38px);
    margin-bottom: clamp(30px, 3.6vw, 56px);
}

.rm-legal__toc h2 {
    font-family: var(--rm-body);
    font-size: clamp(11px, .95vw, 14px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--rm-blue);
    margin: 0 0 clamp(14px, 1.6vw, 20px);
}

.rm-legal__toc ol {
    margin: 0;
    padding-left: 20px;
    columns: 2;
    column-gap: clamp(20px, 3vw, 46px);
}

.rm-legal__toc li {
    break-inside: avoid;
    margin-bottom: 9px;
    font-size: clamp(13px, 1.08vw, 16px);
    line-height: 1.5;
}

/* o número é a única coisa colorida da lista: guia o olho sem transformar
   o sumário num bloco de links sublinhados */
.rm-legal__toc li::marker {
    color: var(--rm-blue);
    font-weight: 800;
}

.rm-legal__toc a {
    color: #16224A;
    text-decoration: none;
    transition: color .2s ease;
}

.rm-legal__toc a:hover,
.rm-legal__toc a:focus-visible {
    color: var(--rm-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- seções --- */
.rm-legal__section {
    scroll-margin-top: clamp(90px, 11vw, 150px);
    margin-bottom: clamp(28px, 3.4vw, 52px);
}

.rm-legal__section:last-child { margin-bottom: 0; }

.rm-legal__section h2 {
    font-family: var(--rm-display);
    font-size: clamp(21px, 2.2vw, 34px);
    line-height: 1.06;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: var(--rm-navy);
    margin: 0 0 12px;
}

.rm-legal__section h2 span {
    color: var(--rm-blue);
    margin-right: 8px;
}

.rm-legal__section h3 {
    font-family: var(--rm-body);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 800;
    letter-spacing: 0;
    color: #001455;
    margin: clamp(18px, 2vw, 26px) 0 8px;
}

.rm-legal__section p,
.rm-legal__section li {
    font-size: clamp(13.5px, 1.16vw, 17.5px);
    line-height: 1.78;
    color: #313D63;
}

.rm-legal__section li::marker { color: var(--rm-blue); }

.rm-legal__section p { margin: 0 0 14px; }
.rm-legal__section p:last-child { margin-bottom: 0; }

.rm-legal__section ul {
    margin: 0 0 12px;
    padding-left: 22px;
}

.rm-legal__section li { margin-bottom: 7px; }

.rm-legal__section a {
    color: var(--rm-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rm-legal__section a:hover,
.rm-legal__section a:focus-visible { color: var(--rm-navy); }

/* destaque para o bloco de contato */
.rm-legal__box {
    background: #EAF0FF;
    border-left: 5px solid var(--rm-blue);
    border-radius: 0 14px 14px 0;
    padding: clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 30px);
    margin-top: 14px;
}

.rm-legal__box p:last-child { margin-bottom: 0; }

/* --- rodapé da página --- */
.rm-legal__foot {
    max-width: 940px;
    margin: clamp(24px, 3vw, 44px) auto 0;
    text-align: center;
}

/* aqui o botão é saída da página, não a chamada principal: entra bem menor
   que o CTA da home, que é dimensionado para a dobra */
.rm-legal__foot .rm-btn {
    display: inline-flex;
    font-size: clamp(.82rem, 1.15vw, 1.05rem);
    padding: .68em 2.2em;
    border-width: 1px;
}

@media (max-width: 640px) {
    .rm-legal__toc ol { columns: 1; }
    .rm-legal__card { border-radius: 20px; }
}

/* os títulos das páginas legais usam o mesmo display itálico do resto */
.rm-legal__title,
.rm-legal__section h2 {
    font-weight: 900;
    font-style: italic;
    font-stretch: 70%;
    font-variation-settings: 'wdth' 70;
}

.rm-legal__hero { padding-top: clamp(48px, 6vw, 96px); }


/* -------------------------------------------------------------
   17. Apoio às animações (GSAP)
   Nada aqui esconde conteúdo. Os estados iniciais são aplicados por
   JS, e .rm-curtain / .rm-progress / .rm-scroll-hint só existem se o
   script rodar. Sem GSAP, a página fica inteira e estática.
   ------------------------------------------------------------- */

/* palavra isolada pelo split dos títulos: precisa de inline-block para
   aceitar transform, e o will-change evita repaint durante o stagger */
.rm-w {
    display: inline-block;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* o pai preserva a perspectiva do rotationX aplicado em cada palavra */
.rm-hero__title,
.rm-exp__title,
.rm-sou__title,
.rm-propostas__title,
.rm-compromisso__title,
.rm-fecho__text > span {
    perspective: 800px;
    transform-style: preserve-3d;
}

/* --- colchetes que fecham em volta da palavra ---
   Os [ ] são ::before/::after, fora do alcance do GSAP. O script anima as
   duas variáveis abaixo e o CSS as aplica, cada pseudoelemento para o seu
   lado. Os valores padrão são o estado final: sem JS, o colchete já está
   no lugar. */
.rm-brk::before,
.rm-brk::after {
    display: inline-block;
    opacity: var(--rm-brk-o, 1);
}
.rm-brk::before { transform: translateX(calc(var(--rm-brk-d, 0px) * -1)); }
.rm-brk::after  { transform: translateX(var(--rm-brk-d, 0px)); }

/* --- véu do hero ---
   No desktop a arte do hero é background da seção e o GSAP não alcança um
   background-image. O véu entra abaixo da grade (que é z-index 2), some no
   fade e revela a foto sem esconder o formulário. Criado e removido em JS. */
.rm-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--rm-navy-deep);
    pointer-events: none;
    will-change: opacity;
}

/* --- cortina de abertura --- */
.rm-curtain {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    /* sem isto as duas linhas da grade esticam para a altura da tela e a
       faixa vai parar lá embaixo, longe da logo */
    align-content: center;
    gap: 22px;
    background: var(--rm-navy-deep);
    will-change: transform;
}

.rm-curtain__logo {
    width: min(62vw, 420px);
    height: auto;
}

.rm-curtain__bar {
    width: min(62vw, 420px);
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--rm-green) 0 32%, var(--rm-yellow) 32% 68%, var(--rm-blue) 68% 100%);
}

/* trava a rolagem enquanto a cortina está na frente */
.rm-travado, .rm-travado body { overflow: hidden; }

/* --- barra de progresso da leitura --- */
.rm-progress {
    position: fixed;
    top: 0; left: 0;
    z-index: 100;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        var(--rm-green) 0 32%, var(--rm-yellow) 32% 68%, var(--rm-blue) 68% 100%);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* --- dica de rolagem no fim do hero (só desktop) --- */
.rm-scroll-hint {
    position: fixed;
    bottom: 26px;
    left: 30px;
    z-index: 30;
    width: 22px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 12px;
    overflow: hidden;
    pointer-events: none;
}

.rm-scroll-hint__line {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 8px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--rm-white);
}

/* o transform do botão magnético é do GSAP: a transition do CSS só
   atrasaria o acompanhamento do cursor */
.rm-btn.rm-magnetic { transition: filter .18s ease; }
.rm-btn.rm-magnetic:hover { transform: none; }