/* =========================================================================
   Rumo Certo Consórcios — folha de estilo do site
   Layout aprovado: SITE-2026-RUMO-PC / SITE-2026-RUMO-MOBILE (opção 1)

   Escrita mobile-first. Os breakpoints acompanham as duas pranchas do
   layout: até 767px vale a prancha mobile, de 768px vale a de desktop.
   ========================================================================= */

/* ─── Tokens ───────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Cores medidas no arquivo do layout, não estimadas */
    --rc-vermelho:        #9f0f00;
    --rc-vermelho-escuro: #7d0c00;
    --rc-vermelho-marca:  #cd1719;   /* vermelho do logotipo */
    --rc-escuro:          #222222;
    --rc-escuro-2:        #2c2c2c;
    --rc-preto:           #000000;
    --rc-cinza-fundo:     #ebebeb;
    --rc-cinza-borda:     #dcdcdc;
    --rc-cinza-texto:     #5f5f5f;
    --rc-cinza-medio:     #8e8e8e;
    /* Fundo dos controles inativos (abas do simulador, barras do FAQ). O
       cinza do layout (#8e8e8e) dá 3.28:1 com texto branco — abaixo do
       mínimo AA de 4.5:1 para texto pequeno. Este dá 5.10:1. */
    --rc-cinza-inativo:   #6e6e6e;
    /* Mesma história no verde: o #009933 do layout fica em 3.75:1 atrás do
       texto branco do botão. Este dá 5.09:1 e é indistinguível ao lado.
       O tom original segue nos botões só de ícone, onde o mínimo é 3:1. */
    --rc-verde:           #00802b;
    --rc-verde-escuro:    #00661f;
    --rc-verde-icone:     #009933;
    --rc-branco:          #ffffff;

    --rc-texto:           #1d1d1d;

    --rc-fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rc-fonte-texto:  "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --rc-container: 1040px;
    --rc-gutter: 20px;

    --rc-raio:      10px;
    --rc-raio-card: 14px;

    --rc-sombra:      0 2px 10px rgba(0, 0, 0, .07);
    --rc-sombra-alta: 0 10px 30px rgba(0, 0, 0, .16);

    --rc-header-altura: 74px;

    --rc-transicao: .25s ease;
}

/* ─── Base ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* âncoras não somem atrás do cabeçalho fixo */
    scroll-padding-top: calc(var(--rc-header-altura) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--rc-branco);
    color: var(--rc-texto);
    font-family: var(--rc-fonte-texto);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--rc-vermelho); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--rc-fonte-titulo);
    line-height: 1.12;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

:focus-visible {
    outline: 3px solid var(--rc-vermelho-marca);
    outline-offset: 2px;
}

/* Pular para o conteúdo: primeiro foco da página, invisível até receber foco */
.pular {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--rc-escuro);
    color: var(--rc-branco);
    padding: 12px 20px;
    border-radius: 0 0 var(--rc-raio) 0;
}
.pular:focus { left: 0; }

/* Honeypot do formulário de contato: precisa ficar invisível ao usuário */
input[name="website"] {
    position: absolute;
    left: -9999px;
}

.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ─── Estrutura ────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: calc(var(--rc-container) + var(--rc-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--rc-gutter);
}

/* A tabela de contempladas tem treze colunas: na medida normal ela rolaria
   mesmo em telas grandes, então essa seção usa uma medida própria. */
.container--largo { max-width: 1360px; }

.secao        { padding-block: 52px; }
.secao--densa { padding-block: 34px; }
.secao--clara { background: var(--rc-branco); }
.secao--cinza { background: var(--rc-cinza-fundo); }
.secao--escura {
    background: var(--rc-escuro);
    color: var(--rc-branco);
}

@media (min-width: 768px) {
    .secao        { padding-block: 76px; }
    .secao--densa { padding-block: 48px; }
}

/* ─── Títulos de seção ─────────────────────────────────────────────────── */

/*
 * O layout usa sempre o mesmo par: uma palavra em peso leve e a seguinte em
 * extrabold, na mesma linha. Por isso o <strong> dentro do h2, e não dois
 * elementos separados — o par precisa quebrar junto no mobile.
 */
.titulo-secao {
    text-align: center;
    margin-bottom: 34px;
}

.titulo-secao h1,
.titulo-secao h2 {
    font-weight: 300;
    font-size: clamp(1.75rem, 6.2vw, 2.75rem);
    text-transform: uppercase;
    margin-bottom: .18em;
}

.titulo-secao strong { font-weight: 800; }

.titulo-secao p {
    font-family: var(--rc-fonte-titulo);
    font-size: clamp(.875rem, 3.4vw, 1.125rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: inherit;
    margin: 0;
}

.secao--escura .titulo-secao p { color: rgba(255, 255, 255, .82); }

/* Texto editorial vindo do editor do painel */
.texto-rico { max-width: 78ch; margin-inline: auto; }
.texto-rico :where(h2, h3) { font-weight: 700; text-transform: none; }
.texto-rico img { border-radius: var(--rc-raio); margin-block: 1.4em; }

/* ─── Botões ───────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 28px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--rc-fonte-titulo);
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--rc-transicao), color var(--rc-transicao),
                border-color var(--rc-transicao), transform var(--rc-transicao);
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }

.btn .ico { width: 20px; height: 20px; flex: none; }

.btn--vermelho { background: var(--rc-vermelho); color: var(--rc-branco); }
.btn--vermelho:hover { background: var(--rc-vermelho-escuro); color: var(--rc-branco); }

.btn--escuro { background: var(--rc-escuro); color: var(--rc-branco); }
.btn--escuro:hover { background: #000; color: var(--rc-branco); }

.btn--verde { background: var(--rc-verde); color: var(--rc-branco); }
.btn--verde:hover { background: var(--rc-verde-escuro); color: var(--rc-branco); }

/* Contorno claro: usado sobre a barra vermelha e sobre o hero */
.btn--contorno-claro {
    border-color: var(--rc-branco);
    color: var(--rc-branco);
    background: transparent;
}
.btn--contorno-claro:hover {
    background: var(--rc-branco);
    color: var(--rc-vermelho);
}

.btn--contorno-escuro {
    border-color: var(--rc-escuro);
    color: var(--rc-escuro);
    background: transparent;
}
.btn--contorno-escuro:hover { background: var(--rc-escuro); color: var(--rc-branco); }

.btn--largo  { width: 100%; }
.btn--grande { min-height: 56px; padding-inline: 42px; font-size: 1rem; }

.btn-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* ─── Cabeçalho ────────────────────────────────────────────────────────── */

.cabecalho {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--rc-branco);
    box-shadow: var(--rc-sombra);
    transition: background var(--rc-transicao), box-shadow var(--rc-transicao);
}

.cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--rc-header-altura);
}

.cabecalho__logo { flex: none; display: flex; align-items: center; }
.cabecalho__logo img { width: 190px; height: auto; }
/* A versão branca é a marca empilhada: mais estreita e mais alta que a deitada */
.cabecalho__logo .logo--branco { width: 116px; }

.cabecalho__contato {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: var(--rc-fonte-titulo);
    font-size: 1.0625rem;
    color: var(--rc-cinza-texto);
}
.cabecalho__contato strong { color: var(--rc-escuro); font-weight: 700; }
.cabecalho__contato:hover { text-decoration: none; }
.cabecalho__contato .ico { width: 22px; height: 22px; color: var(--rc-cinza-medio); }

@media (min-width: 768px) {
    .cabecalho__contato { display: inline-flex; }
    .cabecalho__logo img { width: 230px; }
    .cabecalho__logo .logo--branco { width: 132px; }
}

/*
 * O layout usa o botão MENU também no desktop — não existe barra de links
 * horizontal em nenhuma das nove pranchas. O menu é sempre uma camada.
 */
.menu-botao {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--rc-escuro);
    font-family: var(--rc-fonte-titulo);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.menu-botao__barras {
    display: block;
    width: 30px;
    height: 20px;
    position: relative;
}

.menu-botao__barras span,
.menu-botao__barras::before,
.menu-botao__barras::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--rc-transicao), opacity var(--rc-transicao);
}
.menu-botao__barras::before { top: 0; }
.menu-botao__barras span    { top: 8.5px; }
.menu-botao__barras::after  { bottom: 0; }

/* Cabeçalho transparente sobre o hero da home */
.cabecalho--sobreposto {
    position: fixed;
    inset: 0 0 auto;
    background: transparent;
    box-shadow: none;
}
.cabecalho--sobreposto .menu-botao { color: var(--rc-branco); }
.cabecalho--sobreposto .cabecalho__contato { color: rgba(255, 255, 255, .85); }
.cabecalho--sobreposto .cabecalho__contato strong { color: var(--rc-branco); }
.cabecalho--sobreposto .cabecalho__contato .ico { color: rgba(255, 255, 255, .85); }
.cabecalho--sobreposto .logo--cor    { display: none; }
.cabecalho--sobreposto .logo--branco { display: block; }

.logo--branco { display: none; }

/* Ao rolar, o cabeçalho sobreposto vira sólido para o texto continuar legível */
.cabecalho--sobreposto.esta-solido {
    background: var(--rc-branco);
    box-shadow: var(--rc-sombra);
}
.cabecalho--sobreposto.esta-solido .menu-botao { color: var(--rc-escuro); }
.cabecalho--sobreposto.esta-solido .cabecalho__contato { color: var(--rc-cinza-texto); }
.cabecalho--sobreposto.esta-solido .cabecalho__contato strong { color: var(--rc-escuro); }
.cabecalho--sobreposto.esta-solido .logo--cor    { display: block; }
.cabecalho--sobreposto.esta-solido .logo--branco { display: none; }

/* ─── Menu em camada ───────────────────────────────────────────────────── */

.menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr;
    visibility: hidden;
}

.menu[data-aberto="true"] { visibility: visible; }

.menu__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity var(--rc-transicao);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.menu[data-aberto="true"] .menu__fundo { opacity: 1; }

.menu__painel {
    position: relative;
    justify-self: end;
    width: min(400px, 88vw);
    height: 100%;
    background: var(--rc-escuro);
    color: var(--rc-branco);
    padding: 26px 28px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--rc-transicao);
}
.menu[data-aberto="true"] .menu__painel { transform: none; }

.menu__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}
.menu__topo img { width: 110px; }

.menu__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--rc-branco);
    cursor: pointer;
}
.menu__fechar .ico { width: 20px; height: 20px; transform: rotate(45deg); }
.menu__fechar:hover { background: var(--rc-vermelho); }

.menu__lista { list-style: none; margin: 0; padding: 0; }

.menu__lista a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: var(--rc-branco);
    font-family: var(--rc-fonte-titulo);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.menu__lista a:hover { color: #ff6b5a; text-decoration: none; }
.menu__lista a[aria-current="page"] { color: #ff6b5a; }

.menu__sub { list-style: none; margin: 0; padding: 0 0 6px 16px; }
.menu__sub a {
    font-size: .8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: 9px 0;
    color: rgba(255, 255, 255, .78);
    border-bottom: 0;
}

.menu__rodape {
    margin-top: 28px;
    display: grid;
    gap: 12px;
}

.menu__contato {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .8);
    font-size: .875rem;
}
.menu__contato .ico { width: 18px; height: 18px; flex: none; }
.menu__contato:hover { color: var(--rc-branco); text-decoration: none; }

body.menu-aberto { overflow: hidden; }

/* ─── Hero da home ─────────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: 74vh;
    display: grid;
    isolation: isolate;
    background: var(--rc-preto);
    color: var(--rc-branco);
}

@media (min-width: 768px) {
    .hero { min-height: 86vh; }
}

.hero__slides { display: grid; grid-template-areas: "slide"; }

.hero__slide {
    grid-area: slide;
    display: grid;
    place-items: center;
    padding: calc(var(--rc-header-altura) + 40px) 0 76px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;
}
.hero__slide[data-ativo="true"] { opacity: 1; visibility: visible; }

.hero__fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/*
 * O degradê não é decoração: sem ele o texto branco cai para menos de 3:1
 * sobre as áreas claras das fotos do banco de imagens.
 */
.hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .78) 100%);
}

.hero__texto { text-align: center; }

.hero__texto p {
    font-family: var(--rc-fonte-titulo);
    font-size: clamp(1.05rem, 4.6vw, 1.875rem);
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: .15em;
    text-wrap: balance;
}

.hero__texto h1 {
    font-size: clamp(1.7rem, 7vw, 3.5rem);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: .7em;
    text-wrap: balance;
}

.hero__controles {
    position: absolute;
    inset: auto 0 26px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hero__ponto {
    width: 12px; height: 12px;
    padding: 0;
    border: 2px solid var(--rc-branco);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.hero__ponto[aria-selected="true"] { background: var(--rc-branco); }

.hero__seta {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border: 0;
    background: transparent;
    color: var(--rc-branco);
    cursor: pointer;
    opacity: .85;
}
.hero__seta:hover { opacity: 1; }
.hero__seta--antes  { left: 4px; }
.hero__seta--depois { right: 4px; }
.hero__seta .ico { width: 28px; height: 28px; }

/* ─── Topo das páginas internas ────────────────────────────────────────── */

.topo-interno {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 240px;
    padding: 60px 0;
    background: var(--rc-preto);
    color: var(--rc-branco);
    text-align: center;
}

@media (min-width: 768px) {
    .topo-interno { min-height: 330px; }
}

.topo-interno__fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .55;
}

.topo-interno p {
    font-family: var(--rc-fonte-titulo);
    font-size: clamp(1rem, 4.4vw, 1.75rem);
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: .1em;
}

.topo-interno h1 {
    font-size: clamp(1.9rem, 8vw, 3.5rem);
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

/* ─── Barra "falar com especialista" ───────────────────────────────────── */

.barra-especialista {
    background: var(--rc-vermelho);
    color: var(--rc-branco);
    padding-block: 26px;
}

.barra-especialista__interno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.barra-especialista p {
    margin: 0;
    font-family: var(--rc-fonte-titulo);
    font-size: clamp(1.0625rem, 4.4vw, 1.375rem);
    font-weight: 400;
}

@media (min-width: 768px) {
    .barra-especialista__interno { flex-direction: row; justify-content: center; gap: 28px; }
}

/* ─── Barra de CTA antes do rodapé ─────────────────────────────────────── */

.barra-cta {
    background: var(--rc-vermelho);
    padding-block: 30px;
}

/* ─── Cards de destaque da home ────────────────────────────────────────── */

.destaques {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .destaques { grid-template-columns: repeat(2, 1fr); }
}

.destaque {
    display: grid;
    place-items: center;
    gap: 18px;
    min-height: 230px;
    padding: 38px 24px;
    border-radius: var(--rc-raio-card);
    color: var(--rc-branco);
    text-align: center;
    font-family: var(--rc-fonte-titulo);
    font-size: clamp(1.25rem, 4.6vw, 1.625rem);
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.2;
    transition: transform var(--rc-transicao), box-shadow var(--rc-transicao);
}
.destaque:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--rc-sombra-alta); }
.destaque .ico { width: 62px; height: 62px; }

.destaque--vermelho { background: var(--rc-vermelho); color: var(--rc-branco); }
.destaque--escuro   { background: var(--rc-escuro);   color: var(--rc-branco); }

/* ─── Cards de tipo de consórcio ───────────────────────────────────────── */

.tipos {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .tipos { grid-template-columns: repeat(3, 1fr); }
}

.tipo {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 14px;
    padding: 34px 26px 30px;
    border-radius: var(--rc-raio-card);
    background: var(--rc-cinza-fundo);
    color: var(--rc-texto);
    text-align: center;
    transition: background var(--rc-transicao), color var(--rc-transicao),
                transform var(--rc-transicao);
}
.tipo:hover {
    text-decoration: none;
    background: var(--rc-escuro);
    color: var(--rc-branco);
    transform: translateY(-4px);
}

.tipo__marca {
    display: grid;
    place-items: center;
    width: 86px; height: 86px;
    border-radius: 50%;
    background: var(--rc-escuro);
    color: var(--rc-branco);
    transition: background var(--rc-transicao), box-shadow var(--rc-transicao);
}
.tipo:hover .tipo__marca {
    background: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
}
.tipo__marca .ico { width: 44px; height: 44px; }

.tipo h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.tipo p { font-size: .875rem; margin: 0; }

/* ─── Cards de vantagem ────────────────────────────────────────────────── */

.vantagens {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

@media (min-width: 560px) { .vantagens { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .vantagens { grid-template-columns: repeat(4, 1fr); } }

.vantagem {
    display: grid;
    justify-items: center;
    /* start, não stretch: com linhas automáticas o grid distribuiria a sobra
       de altura do card mais curto entre as linhas, e ícone, título e texto
       sairiam do alinhamento em relação aos cards vizinhos */
    align-content: start;
    gap: 10px;
    padding: 28px 20px 26px;
    background: var(--rc-branco);
    color: var(--rc-texto);
    border-radius: var(--rc-raio);
    text-align: center;
}

.vantagem .ico { width: 54px; height: 54px; color: var(--rc-escuro); }

.vantagem h3 {
    position: relative;
    margin: 6px 0 14px;
    padding-bottom: 12px;
    font-size: .9375rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25;
    /* Duas linhas reservadas: sem isso, um título de uma linha sobe o
       traço e o texto do card, e a grade perde o alinhamento horizontal */
    min-height: calc(2.5em + 12px);
    display: grid;
    align-content: center;
}
.vantagem h3::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 0;
    translate: -50% 0;
    width: 46px; height: 2px;
    background: var(--rc-escuro);
}

.vantagem p { font-size: .8125rem; margin: 0; color: var(--rc-cinza-texto); }

/* ─── Cards de item (carro, moto, casa, terreno…) ──────────────────────── */

.itens {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .itens { grid-template-columns: repeat(4, 1fr); }
    .itens--tres { grid-template-columns: repeat(3, 1fr); }
}

.espaco-topo  { margin-top: 42px; }
.texto-centro { text-align: center; }

.item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    padding: 26px 14px 22px;
    border: 2px solid var(--rc-escuro);
    border-radius: var(--rc-raio-card);
    text-align: center;
    background: var(--rc-branco);
    transition: background var(--rc-transicao), color var(--rc-transicao);
}
.item:hover { background: var(--rc-escuro); color: var(--rc-branco); }

.item .ico { width: 58px; height: 58px; }

.item h3 {
    position: relative;
    margin: 10px 0 0;
    padding-top: 12px;
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25;
    min-height: calc(2.5em + 12px);
    display: grid;
    align-content: center;
}
.item h3::before {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    translate: -50% 0;
    width: 52px; height: 2px;
    background: currentColor;
}

/* ─── Etapas de "como funciona" ────────────────────────────────────────── */

.etapas {
    display: grid;
    gap: 34px 18px;
    grid-template-columns: 1fr;
    margin-top: 42px;
}

@media (min-width: 560px) { .etapas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .etapas { grid-template-columns: repeat(4, 1fr); } }

.etapa {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 10px;
    padding: 46px 22px 28px;
    background: var(--rc-escuro);
    color: var(--rc-branco);
    border-radius: var(--rc-raio-card);
    text-align: center;
}

.etapa__numero {
    position: absolute;
    top: -26px;
    left: 50%;
    translate: -50% 0;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--rc-vermelho);
    color: var(--rc-branco);
    font-family: var(--rc-fonte-titulo);
    font-size: 1.375rem;
    font-weight: 600;
}

.etapa .ico { width: 52px; height: 52px; }

.etapa h3 {
    display: grid;
    align-content: center;
    min-height: 2.5em;
    margin: 4px 0 2px;
    font-size: .9375rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25;
}

.etapa p { font-size: .8125rem; margin: 0; color: rgba(255, 255, 255, .8); }

/* ─── Simulador ────────────────────────────────────────────────────────── */

.simulador__abas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}

.simulador__aba {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--rc-cinza-inativo);
    color: var(--rc-branco);
    font-family: var(--rc-fonte-titulo);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background var(--rc-transicao);
}
.simulador__aba .ico { width: 22px; height: 22px; }
.simulador__aba:hover { background: #5a5a5a; }
.simulador__aba[aria-pressed="true"] { background: var(--rc-vermelho); }

.simulador__nota {
    max-width: 70ch;
    margin: 4px auto 22px;
    font-size: .875rem;
    color: var(--rc-cinza-texto);
}

/* ─── Formulários ──────────────────────────────────────────────────────── */

.form {
    max-width: 860px;
    margin-inline: auto;
}

.form__grade {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    margin-bottom: 18px;
}

@media (min-width: 768px) {
    .form__grade--duas { grid-template-columns: repeat(2, 1fr); }
    .form__grade--lado { grid-template-columns: 1fr 1fr; align-items: start; }
    .campo--inteiro { grid-column: 1 / -1; }
}

.campo { position: relative; display: grid; }

.campo > label {
    font-family: var(--rc-fonte-titulo);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rc-cinza-texto);
    margin-bottom: 5px;
}

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 46px 12px 18px;
    border: 1px solid var(--rc-cinza-borda);
    border-radius: var(--rc-raio);
    background: var(--rc-branco);
    color: var(--rc-texto);
    font-family: inherit;
    font-size: .9375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color var(--rc-transicao), box-shadow var(--rc-transicao);
}

.campo textarea { min-height: 148px; padding-right: 18px; resize: vertical; }

.campo select {
    appearance: none;
    cursor: pointer;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--rc-vermelho);
    box-shadow: 0 0 0 3px rgba(159, 15, 0, .14);
}

.campo__icone {
    position: absolute;
    right: 16px;
    bottom: 15px;
    width: 20px; height: 20px;
    color: var(--rc-cinza-medio);
    pointer-events: none;
}

/* O placeholder é o único rótulo visível do campo — precisa passar no
   contraste como texto normal, não como decoração. */
.campo input::placeholder,
.campo textarea::placeholder { color: #767676; opacity: 1; }

/* Campo sem <label> visível: o ícone volta para o centro vertical */
.campo--sem-rotulo .campo__icone { bottom: 50%; translate: 0 50%; }

.campo--erro input,
.campo--erro select,
.campo--erro textarea { border-color: var(--rc-vermelho); }

.campo__erro {
    margin-top: 5px;
    font-size: .8125rem;
    color: var(--rc-vermelho);
}

.form__acoes { display: grid; justify-items: center; gap: 14px; }

.form__consentimento {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 70ch;
    margin-inline: auto;
    font-size: .8125rem;
    color: var(--rc-cinza-texto);
}
.form__consentimento input { margin-top: 3px; }

/* ─── Avisos (flash) ───────────────────────────────────────────────────── */

.flash-area { padding: 16px var(--rc-gutter) 0; }

.flash {
    max-width: var(--rc-container);
    margin: 0 auto 10px;
    padding: 14px 18px;
    border-radius: var(--rc-raio);
    border-left: 5px solid;
    font-size: .9375rem;
}
.flash--success { background: #e8f6ed; border-color: var(--rc-verde); color: #14532d; }
.flash--error   { background: #fdeceb; border-color: var(--rc-vermelho); color: #7a1008; }
.flash--info    { background: #eef2f7; border-color: var(--rc-escuro); color: #1f2937; }

/* ─── Galeria (quem somos) ─────────────────────────────────────────────── */

.faixa-fotos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

@media (min-width: 768px) {
    .faixa-fotos { grid-template-columns: repeat(4, 1fr); }
}

.faixa-fotos img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ─── FAQ ──────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 10px; max-width: 900px; margin-inline: auto; }

.faq__item { border-radius: var(--rc-raio); overflow: hidden; }
.faq__item h3 { margin: 0; font-size: inherit; }

.faq__botao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    background: var(--rc-cinza-inativo);
    color: var(--rc-branco);
    font-family: var(--rc-fonte-titulo);
    font-size: .9375rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--rc-transicao);
}
.faq__botao:hover { background: #5a5a5a; }
.faq__botao[aria-expanded="true"] { background: var(--rc-vermelho); }

.faq__botao .ico { width: 20px; height: 20px; flex: none; transition: transform var(--rc-transicao); }
.faq__botao[aria-expanded="true"] .ico { transform: rotate(45deg); }

.faq__resposta { padding: 18px 20px 4px; }
.faq__resposta[hidden] { display: none; }

/* ─── Tabela de cartas contempladas ────────────────────────────────────── */

.painel-cartas {
    background: #f4f4f4;
    border-radius: var(--rc-raio);
    padding: 18px;
}

.painel-cartas__topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.painel-cartas__acoes { display: flex; flex-wrap: wrap; gap: 10px; }

.painel-cartas__acoes .btn {
    min-height: 40px;
    padding: 8px 18px;
    font-size: .75rem;
}

.painel-cartas__filtro {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: min(340px, 100%);
}
.painel-cartas__filtro select {
    flex: 1;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--rc-cinza-borda);
    border-radius: 8px;
    background: var(--rc-branco);
    font-family: inherit;
    font-size: .875rem;
}

/* A tabela é larga por natureza: rola dentro do painel, nunca no body */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabela-cartas {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
    background: var(--rc-branco);
    font-size: .8125rem;
}

.tabela-cartas th {
    padding: 12px 10px;
    text-align: left;
    font-family: var(--rc-fonte-titulo);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--rc-cinza-texto);
    border-bottom: 2px solid var(--rc-cinza-borda);
    white-space: nowrap;
}

.tabela-cartas td {
    padding: 12px 10px;
    border-bottom: 1px solid #ededed;
    white-space: nowrap;
}

.tabela-cartas tbody tr:nth-child(odd) { background: #fafafa; }
.tabela-cartas tbody tr:hover { background: #f2f2f2; }

.tabela-cartas .valor { color: var(--rc-vermelho); font-weight: 600; }

.selo {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 6px;
    color: var(--rc-branco);
    font-family: var(--rc-fonte-titulo);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
}
.selo--disponivel { background: var(--rc-verde); }
.selo--reservado  { background: var(--rc-vermelho); }

.botao-zap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 7px;
    background: var(--rc-verde-icone);
    color: var(--rc-branco);
}
.botao-zap:hover { background: var(--rc-verde-escuro); text-decoration: none; }
.botao-zap .ico { width: 19px; height: 19px; }

.tabela-vazia {
    padding: 40px 20px;
    text-align: center;
    color: var(--rc-cinza-texto);
    background: var(--rc-branco);
    border-radius: 8px;
}

/* ─── Canais de atendimento ────────────────────────────────────────────── */

.canais {
    background: var(--rc-preto);
    color: var(--rc-branco);
    padding-block: 36px;
}

.canais__lista {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .canais__lista { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Rodapé ───────────────────────────────────────────────────────────── */

.rodape {
    background: var(--rc-escuro);
    color: rgba(255, 255, 255, .82);
    font-size: .8125rem;
}

.rodape__marcas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding-block: 26px;
    border-bottom: 1px solid #000;
}

@media (min-width: 768px) {
    .rodape__marcas { justify-content: space-between; }
}

.rodape__marcas img { width: 132px; }

.rodape__hs {
    font-family: var(--rc-fonte-titulo);
    color: var(--rc-branco);
    line-height: 1.25;
    text-align: center;
}
.rodape__hs strong { display: block; font-size: 1.375rem; font-weight: 700; letter-spacing: .02em; }
.rodape__hs span { font-size: .6875rem; font-style: italic; opacity: .85; }

.rodape__final {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding-block: 26px 30px;
    text-align: center;
}

.rodape__sociais { display: flex; gap: 12px; }

.rodape__sociais a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--rc-branco);
    color: var(--rc-escuro);
    transition: background var(--rc-transicao), color var(--rc-transicao);
}
.rodape__sociais a:hover { background: var(--rc-vermelho); color: var(--rc-branco); }
.rodape__sociais .ico { width: 20px; height: 20px; }

.rodape__creditos { color: rgba(255, 255, 255, .62); font-size: .75rem; }
.rodape__creditos a { color: inherit; text-decoration: underline; }

/* ─── Botão flutuante do WhatsApp ──────────────────────────────────────── */

.zap-flutuante {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--rc-verde-icone);
    color: var(--rc-branco);
    box-shadow: var(--rc-sombra-alta);
    transition: transform var(--rc-transicao), background var(--rc-transicao);
}
.zap-flutuante:hover { background: var(--rc-verde-escuro); transform: scale(1.06); text-decoration: none; }
.zap-flutuante .ico { width: 32px; height: 32px; }

/* ─── Impressão (tabela de contempladas) ───────────────────────────────── */

@media print {
    .cabecalho, .menu, .rodape, .zap-flutuante, .barra-especialista,
    .barra-cta, .topo-interno, .painel-cartas__topo, .canais { display: none !important; }

    body { font-size: 11px; }
    .tabela-cartas { min-width: 0; }
    .painel-cartas { padding: 0; background: none; }
    a[href]::after { content: ""; }
}