/* =============================================================================
   Funil de proposta de parceria (propostaparceiro.gestaoapice.com).

   Fundo ESCURO, e nao o claro da landing. Nao e capricho: quem chega aqui nao e
   consumidor procurando um aplicativo, e sim alguem avaliando um negocio. O
   escuro separa as duas conversas, e o azul da marca rende muito mais contraste
   sobre ele - o que importa numa pagina cujo unico objetivo e um clique.

   Sobre os hifens: os textos visiveis nao usam nenhum, por pedido do produto.
   ============================================================================= */

:root {
    --pr-azul: #5B7CFA;
    --pr-azul-claro: #8AA3FF;
    --pr-azul-escuro: #3F5FD8;

    --pr-fundo: #0D1220;
    --pr-fundo-2: #131A2C;
    --pr-superficie: #182034;
    --pr-superficie-2: #1E2740;
    --pr-borda: #2A3450;

    --pr-texto: #F2F5FC;
    --pr-suave: #A8B2CC;
    --pr-tenue: #78849F;

    --pr-verde: #34D399;
    --pr-dourado: #FBBF24;

    --pr-raio: 16px;
    --pr-raio-p: 10px;
    --pr-largura: 1120px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pr-fundo);
    color: var(--pr-texto);
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: var(--pr-azul-claro); }

.pr-container { width: 100%; max-width: var(--pr-largura); margin: 0 auto; padding: 0 24px; }
.pr-estreito { max-width: 760px; }

/* ============================================================== cabecalho */

.pr-topo {
    padding: 22px 0;
    border-bottom: 1px solid var(--pr-borda);
    background: rgba(13, 18, 32, .8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}
.pr-topo-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pr-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.pr-marca img { height: 36px; width: auto; }
.pr-topo-nota { font-size: 12.5px; color: var(--pr-tenue); }

/* =================================================================== hero */

.pr-hero {
    position: relative;
    overflow: hidden;
    padding: 74px 0 64px;
    text-align: center;
}
/* Brilho de fundo: decoracao pura, sem nada legivel dentro. */
.pr-hero::before {
    content: '';
    position: absolute;
    width: 900px; height: 900px;
    left: 50%; top: -560px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(91, 124, 250, .22) 0%, rgba(91, 124, 250, 0) 66%);
    pointer-events: none;
}
.pr-hero > * { position: relative; }

.pr-selo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--pr-azul-claro);
    background: rgba(91, 124, 250, .12);
    border: 1px solid rgba(91, 124, 250, .32);
    border-radius: 999px;
    padding: 7px 16px;
    margin-bottom: 26px;
}
.pr-ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.pr-hero h1 {
    font-size: clamp(31px, 5.2vw, 54px);
    font-weight: 800;
    max-width: 17ch;
    margin: 0 auto 22px;
}
.pr-destaque {
    background: linear-gradient(100deg, var(--pr-azul-claro), #B9C8FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-hero-sub {
    font-size: clamp(16px, 2vw, 19px);
    color: var(--pr-suave);
    max-width: 60ch;
    margin: 0 auto 36px;
}

/* ================================================================ secoes */

.pr-secao { padding: 64px 0; }
.pr-secao-alt { background: var(--pr-fundo-2); border-block: 1px solid var(--pr-borda); }

.pr-titulo-secao { text-align: center; margin-bottom: 44px; }
.pr-titulo-secao h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; margin-bottom: 12px; }
.pr-titulo-secao p { color: var(--pr-suave); max-width: 58ch; margin: 0 auto; }

.pr-etiqueta {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pr-azul);
    margin-bottom: 12px;
}

/* ============================================================== o produto */

.pr-tela {
    border-radius: var(--pr-raio);
    border: 1px solid var(--pr-borda);
    overflow: hidden;
    background: var(--pr-superficie);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
    margin-bottom: 44px;
}
.pr-tela-barra {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: var(--pr-superficie-2);
    border-bottom: 1px solid var(--pr-borda);
}
.pr-bolinha { width: 10px; height: 10px; border-radius: 50%; background: #3A4666; }
.pr-tela-endereco {
    margin-left: 12px;
    font-size: 12px;
    color: var(--pr-tenue);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pr-legenda-imagem {
    text-align: center;
    font-size: 13px;
    color: var(--pr-tenue);
    margin-top: 14px;
}

.pr-recursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.pr-recurso {
    background: var(--pr-superficie);
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio);
    padding: 26px;
    transition: transform .18s ease, border-color .18s ease;
}
.pr-recurso:hover { transform: translateY(-3px); border-color: rgba(91, 124, 250, .45); }
.pr-recurso-icone {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(91, 124, 250, .14);
    color: var(--pr-azul-claro);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.pr-recurso-icone svg { width: 21px; height: 21px; }
.pr-recurso h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.pr-recurso p { font-size: 14.5px; color: var(--pr-suave); }

/* ------------------------------------------------------ conversa de exemplo */

/*
   O WhatsApp aparece como CONVERSA montada em HTML, e nao como print.
   Print de conversa envelhece, mostra numero de telefone e some quando o
   aparelho muda de tema. Montada aqui, ela e nitida em qualquer tela e nao
   carrega dado de ninguem.
*/
.pr-conversa {
    background: #0B141A;
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 460px;
    margin: 0 auto;
}
.pr-balao {
    max-width: 84%;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.5;
    position: relative;
}
.pr-balao-eu { align-self: flex-end; background: #144D37; border-bottom-right-radius: 3px; }
.pr-balao-ele { align-self: flex-start; background: #1F2C34; border-bottom-left-radius: 3px; }
.pr-balao-hora { display: block; font-size: 10.5px; color: rgba(255,255,255,.42); margin-top: 5px; }

.pr-audio { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.pr-audio-play {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.pr-audio-play svg { width: 13px; height: 13px; color: #fff; }
.pr-onda { display: flex; align-items: center; gap: 2px; height: 22px; flex: 1; }
.pr-onda span { width: 2px; background: rgba(255,255,255,.45); border-radius: 2px; }

/* ======================================================= proposta financeira */

.pr-oferta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.pr-beneficio {
    background: var(--pr-superficie);
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio);
    padding: 28px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
/* Os dois primeiros valem mais do que os outros, e a tela precisa dizer isso. */
.pr-beneficio-principal {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(91,124,250,.16) 0%, rgba(91,124,250,.05) 100%);
    border-color: rgba(91, 124, 250, .42);
}
.pr-beneficio-icone {
    width: 48px; height: 48px;
    border-radius: 13px;
    background: rgba(91, 124, 250, .16);
    color: var(--pr-azul-claro);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.pr-beneficio-principal .pr-beneficio-icone { background: var(--pr-azul); color: #fff; }
.pr-beneficio-icone svg { width: 22px; height: 22px; }

.pr-beneficio-valor {
    font-size: clamp(26px, 3.6vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 4px;
}
.pr-beneficio h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.pr-beneficio p { font-size: 14.5px; color: var(--pr-suave); }

.pr-calculo {
    margin-top: 34px;
    background: var(--pr-superficie);
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio);
    padding: 28px;
}
.pr-calculo h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.pr-calculo-nota { font-size: 13.5px; color: var(--pr-tenue); margin-top: 16px; }

.pr-linhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.pr-linha {
    background: var(--pr-fundo-2);
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio-p);
    padding: 18px;
    text-align: center;
}
.pr-linha-topo { font-size: 12.5px; color: var(--pr-tenue); margin-bottom: 8px; }
.pr-linha-valor { font-size: 24px; font-weight: 800; color: var(--pr-verde); letter-spacing: -.02em; }

/* ================================================================= botoes */

.pr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 17px 34px;
    font: inherit;
    font-size: 16.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .18s ease, background .16s ease;
}
.pr-btn svg { width: 18px; height: 18px; }
.pr-btn-principal {
    background: var(--pr-azul);
    color: #fff;
    box-shadow: 0 12px 34px rgba(91, 124, 250, .38);
}
.pr-btn-principal:hover { background: var(--pr-azul-escuro); transform: translateY(-2px); }
.pr-btn-principal:active { transform: translateY(0); }
.pr-btn:disabled { opacity: .6; cursor: default; transform: none; }
.pr-btn-largo { width: 100%; }

.pr-decisao { text-align: center; padding: 72px 0 84px; }
.pr-decisao h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; margin-bottom: 14px; }
.pr-decisao p { color: var(--pr-suave); max-width: 52ch; margin: 0 auto 34px; }

/* O secundario e um link de texto: ele precisa existir e nao competir. */
.pr-recusar {
    display: inline-block;
    margin-top: 26px;
    font-size: 14px;
    color: var(--pr-tenue);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pr-recusar:hover { color: var(--pr-suave); }

/* ============================================================== formulario */

.pr-cartao {
    background: var(--pr-superficie);
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio);
    padding: 36px;
}

.pr-campo { display: block; margin-bottom: 20px; }
.pr-campo-rotulo { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.pr-campo input[type="text"],
.pr-campo input[type="email"] {
    width: 100%;
    padding: 13px 15px;
    background: var(--pr-fundo-2);
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio-p);
    color: var(--pr-texto);
    font: inherit;
    font-size: 15.5px;
    transition: border-color .15s, box-shadow .15s;
}
.pr-campo input::placeholder { color: var(--pr-tenue); }
.pr-campo input:focus {
    outline: none;
    border-color: var(--pr-azul);
    box-shadow: 0 0 0 3px rgba(91, 124, 250, .2);
}
.pr-dica { display: block; font-size: 12.5px; color: var(--pr-tenue); margin-top: 7px; }

/* ------------------------------------------------------------ envio de arquivo */

.pr-arquivo { display: none; }

.pr-solta {
    border: 2px dashed var(--pr-borda);
    border-radius: var(--pr-raio-p);
    padding: 30px 22px;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s, background .16s;
    background: var(--pr-fundo-2);
}
.pr-solta:hover, .pr-solta-ativa { border-color: var(--pr-azul); background: rgba(91,124,250,.07); }
.pr-solta-icone { color: var(--pr-azul-claro); margin-bottom: 12px; }
.pr-solta-icone svg { width: 30px; height: 30px; margin: 0 auto; }
.pr-solta strong { display: block; font-size: 15px; margin-bottom: 5px; }
.pr-solta span { font-size: 13px; color: var(--pr-tenue); }

.pr-previa { margin-top: 16px; display: flex; gap: 14px; align-items: center; }
.pr-previa img {
    width: 92px; height: 66px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--pr-borda);
}
.pr-previa-nome { font-size: 14px; font-weight: 700; word-break: break-all; }
.pr-previa-tam { font-size: 12.5px; color: var(--pr-tenue); }
.pr-trocar {
    background: none;
    border: 1px solid var(--pr-borda);
    color: var(--pr-suave);
    border-radius: 8px;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.pr-trocar:hover { border-color: var(--pr-azul); color: var(--pr-texto); }

.pr-aviso {
    border-radius: var(--pr-raio-p);
    padding: 13px 16px;
    font-size: 14px;
    margin-bottom: 20px;
}
.pr-aviso:empty { display: none; }
.pr-aviso-erro { background: rgba(248, 113, 113, .12); color: #FCA5A5; border: 1px solid rgba(248,113,113,.3); }
.pr-aviso-ok { background: rgba(52, 211, 153, .12); color: #6EE7B7; border: 1px solid rgba(52,211,153,.3); }

/* ============================================================== resultado */

.pr-resultado { text-align: center; padding: 84px 0 96px; }
.pr-resultado-icone {
    width: 84px; height: 84px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 28px;
}
.pr-resultado-icone svg { width: 38px; height: 38px; }
.pr-icone-ok { background: rgba(52, 211, 153, .14); color: var(--pr-verde); }
.pr-icone-neutro { background: rgba(91, 124, 250, .14); color: var(--pr-azul-claro); }

.pr-resultado h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin-bottom: 18px; }
.pr-resultado p { color: var(--pr-suave); font-size: 17px; max-width: 58ch; margin: 0 auto 18px; }

.pr-passos {
    margin: 40px auto 0;
    max-width: 560px;
    text-align: left;
    display: grid;
    gap: 14px;
}
.pr-passo {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--pr-superficie);
    border: 1px solid var(--pr-borda);
    border-radius: var(--pr-raio-p);
    padding: 18px 20px;
}
.pr-passo-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(91, 124, 250, .16);
    color: var(--pr-azul-claro);
    display: flex; align-items: center; justify-content: center;
    font-size: 13.5px; font-weight: 800;
    flex: 0 0 auto;
}
.pr-passo strong { display: block; font-size: 15px; margin-bottom: 3px; }
.pr-passo p { font-size: 13.5px; color: var(--pr-suave); margin: 0; max-width: none; }

/* ================================================================= rodape */

.pr-rodape {
    border-top: 1px solid var(--pr-borda);
    padding: 30px 0;
    text-align: center;
    font-size: 13px;
    color: var(--pr-tenue);
}
.pr-rodape a { color: var(--pr-suave); text-decoration: none; }
.pr-rodape a:hover { text-decoration: underline; }

/* ============================================================ telas menores */

@media (max-width: 900px) {
    .pr-recursos { grid-template-columns: 1fr; }
    .pr-oferta { grid-template-columns: 1fr; }
    .pr-beneficio-principal { grid-column: span 1; }
    .pr-linhas { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .pr-container { padding: 0 16px; }
    .pr-secao { padding: 48px 0; }
    .pr-hero { padding: 52px 0 44px; }
    .pr-cartao { padding: 24px; }
    .pr-btn { width: 100%; padding: 16px 24px; }
    .pr-topo-nota { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}