/*
 * Vivere Daily - pagina de apresentacao.
 *
 * E a primeira coisa que alguem ve. Usa a mesma paleta do produto para que a
 * promessa da apresentacao e a experiencia real sejam visivelmente a mesma coisa.
 */

.topo {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(3, 18, 14, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--borda);
}

.topo-interno {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px var(--e4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
}

.topo .marca { flex-direction: row; align-items: center; gap: 10px; margin: 0; text-align: left; }
.topo .marca svg { width: 34px; height: 34px; flex-shrink: 0; }
/* Sem `nowrap` o nome quebra em duas linhas quando os botoes disputam o espaco. */
.topo .marca-nome { font-size: 19px; white-space: nowrap; }
.topo .marca-frase { display: none; }

.topo-acoes { display: flex; align-items: center; gap: 10px; }

.botao-topo {
    padding: 9px 18px;
    border-radius: var(--raio-pequeno);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.botao-topo.entrar { color: var(--texto-suave); }
.botao-topo.entrar:hover { color: var(--texto-claro); background: rgba(245, 241, 237, 0.07); text-decoration: none; }
.botao-topo.criar { background: var(--acao); color: var(--texto-escuro); }
.botao-topo.criar:hover { background: var(--acao-escura); text-decoration: none; }

/* ---------- Estrutura ---------- */

/* O cabecalho e fixo, entao o alvo de um link ancora precisa parar abaixo dele
   em vez de sumir por baixo. */
.faixa { padding: var(--e5) var(--e4); scroll-margin-top: 76px; }
.centro { max-width: 1240px; margin: 0 auto; }
.estreito { max-width: 860px; margin: 0 auto; }

.faixa-alternada { background: var(--fundo-elevado); border-block: 1px solid var(--borda); }

.rotulo-secao {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--acao);
    margin-bottom: 12px;
    font-weight: 600;
}

.titulo-secao { font-size: 34px; line-height: 1.25; margin-bottom: var(--e3); }
.texto-secao { font-size: 17px; line-height: 1.75; color: var(--texto-suave); }
.texto-secao + .texto-secao { margin-top: var(--e3); }

.frase-destaque {
    margin: var(--e4) 0;
    padding: var(--e3) var(--e4);
    border-left: 3px solid var(--acao);
    border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
    background: rgba(250, 121, 33, 0.08);
    color: var(--texto-claro);
    font-size: clamp(20px, 2.7vw, 27px);
    font-weight: 600;
    line-height: 1.45;
}

/* ---------- Abertura ---------- */

.abertura {
    padding: 100px var(--e4) 90px;
    text-align: center;
    background:
        radial-gradient(ellipse 900px 420px at 50% -10%, rgba(47, 111, 115, 0.3), transparent 70%),
        var(--fundo);
}

.abertura h1 {
    font-size: clamp(34px, 5.5vw, 54px);
    line-height: 1.14;
    max-width: 1040px;
    margin: 0 auto var(--e4);
    letter-spacing: -0.5px;
}

.abertura h1 .destaque { color: var(--acao); }

.abertura-texto {
    font-size: clamp(17px, 2.2vw, 20px);
    line-height: 1.65;
    color: var(--texto-suave);
    max-width: 760px;
    margin: 0 auto var(--e5);
}

.abertura-acoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.botao-grande {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 34px;
    border-radius: var(--raio-pequeno);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
}

.botao-grande.principal { background: var(--acao); color: var(--texto-escuro); }
.botao-grande.principal:hover { background: var(--acao-escura); text-decoration: none; }
.botao-grande.secundario { border-color: var(--marca); color: var(--marca-clara); }
.botao-grande.secundario:hover { background: rgba(47, 111, 115, 0.15); text-decoration: none; }

/* O respiro e maior do que parece necessario de proposito: a nota fala de
   preco e cancelamento logo abaixo de um botao de acao. Colada nele, vira
   legenda do botao; afastada, e informacao que a pessoa le antes de decidir. */
.abertura-nota { margin-top: var(--e4); font-size: var(--apoio); color: var(--texto-tenue); }

/* ---------- Contraste antes/depois ---------- */

.comparacao { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin-top: var(--e4); }

/* A conclusao pertence ao comparativo, mas precisa respirar fora dos cards. */
.comparacao + .texto-secao { margin-top: var(--e4); }

.lado {
    padding: var(--e4);
    border-radius: var(--raio);
    border: 1px solid var(--borda);
}

.lado.antes { background: rgba(245, 241, 237, 0.03); }
.lado.depois { background: rgba(47, 111, 115, 0.12); border-color: var(--marca); }

.lado-titulo { font-size: 14px; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: var(--e3); }
.lado.antes .lado-titulo { color: var(--texto-tenue); }
.lado.depois .lado-titulo { color: var(--marca-clara); }
.lado p { font-size: 17px; line-height: 1.7; }
.lado.antes p { color: var(--texto-tenue); }

/* Separa a chamada profissional do ultimo paragrafo sem alterar os demais CTAs. */
.faixa-profissionais .abertura-acoes { margin-top: var(--e4); }

/* ---------- Cartoes de funcionalidade ---------- */

.grade-funcionalidades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--e3);
    margin-top: var(--e5);
}

.funcionalidade {
    background: var(--fundo-elevado);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e4);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.funcionalidade:hover { border-color: var(--marca); transform: translateY(-3px); }

.funcionalidade-icone {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(47, 111, 115, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--e3);
    color: var(--marca-clara);
}

.funcionalidade-icone svg { width: 23px; height: 23px; }
.funcionalidade h3 { font-size: 18px; margin-bottom: 10px; }
.funcionalidade p { font-size: 15px; line-height: 1.65; color: var(--texto-suave); }

.funcionalidade.destaque {
    background: linear-gradient(150deg, rgba(250, 121, 33, 0.14), rgba(10, 31, 25, 0.9));
    border-color: var(--acao);
    grid-column: 1 / -1;
}

.funcionalidade.destaque .funcionalidade-icone { background: rgba(250, 121, 33, 0.22); color: var(--acao); }
.funcionalidade.destaque h3 { font-size: 24px; }

/* A quantidade atual deixa um unico cartao na ultima linha. Ele fecha a grade
   em largura total, com uma composicao horizontal mais leve que o destaque. */
.grade-funcionalidades > .funcionalidade:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--e4);
    align-items: start;
}

.grade-funcionalidades > .funcionalidade:last-child .funcionalidade-icone {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

.grade-funcionalidades > .funcionalidade:last-child h3,
.grade-funcionalidades > .funcionalidade:last-child p { grid-column: 2; }

@media (max-width: 560px) {
    .grade-funcionalidades > .funcionalidade:last-child { display: block; }
    .grade-funcionalidades > .funcionalidade:last-child .funcionalidade-icone { margin-bottom: var(--e3); }
}

/* ---------- Exemplos de leitura ---------- */

.exemplos { display: grid; gap: 12px; margin-top: var(--e4); }

.exemplo {
    background: rgba(3, 18, 14, 0.55);
    border-left: 3px solid var(--acao);
    border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
    padding: 16px var(--e3);
    font-size: 16px;
    line-height: 1.6;
}

.exemplo-legenda { font-size: var(--apoio); color: var(--texto-tenue); margin-top: var(--e3); font-style: italic; }

/* ---------- Passos ---------- */

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e4); margin-top: var(--e5); }
.passo { text-align: center; }

.passo-numero {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--e3);
    border-radius: 50%;
    background: rgba(47, 111, 115, 0.22);
    border: 1px solid var(--marca);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 600;
    color: var(--marca-clara);
}

.passo h3 { font-size: 17px; margin-bottom: 8px; }
.passo p { font-size: 15px; line-height: 1.6; color: var(--texto-suave); }

/* ---------- Planos ---------- */

.planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--e3);
    max-width: 840px;
    margin: var(--e5) auto 0;
}

.plano {
    background: var(--fundo-elevado);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e5) var(--e4);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
}

.plano.recomendado { border-color: var(--acao); border-width: 2px; }

.selo {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--acao);
    color: var(--texto-escuro);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.plano-nome { font-size: 15px; color: var(--texto-suave); margin-bottom: var(--e2); }
.plano-preco { font-size: 46px; font-weight: 600; line-height: 1; }
.plano-preco .cifrao { font-size: 22px; vertical-align: 14px; margin-right: 2px; }
.plano-periodo { font-size: 14px; color: var(--texto-tenue); margin-top: 6px; }
.plano-economia { font-size: var(--apoio); color: var(--sucesso); margin-top: 10px; font-weight: 600; }
.plano-acao { margin-top: auto; padding-top: var(--e4); }
.plano .botao-grande { width: 100%; justify-content: center; }

.nota-planos { text-align: center; margin-top: var(--e4); font-size: 15px; color: var(--texto-suave); }

/* ---------- Compromissos ---------- */

.compromissos { display: grid; gap: var(--e3); margin-top: var(--e4); }

.compromisso {
    display: flex;
    gap: var(--e3);
    align-items: flex-start;
    padding: var(--e3);
    background: rgba(3, 18, 14, 0.4);
    border-radius: var(--raio-pequeno);
}

.compromisso svg { width: 21px; height: 21px; color: var(--sucesso); flex-shrink: 0; margin-top: 3px; }
.compromisso strong { display: block; margin-bottom: 4px; font-size: 16px; }
.compromisso p { font-size: 15px; line-height: 1.6; color: var(--texto-suave); }

/* ---------- Perguntas frequentes ---------- */

.perguntas { display: grid; gap: 12px; margin-top: var(--e4); }

.pergunta {
    background: rgba(3, 18, 14, 0.45);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    padding: 16px var(--e3);
}

.pergunta[open] { border-color: var(--marca); }

.pergunta summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e3);
}

/* O triangulo padrao do <details> muda de forma entre navegadores; o sinal
   proprio mantem a mesma aparencia em todos. */
.pergunta summary::-webkit-details-marker { display: none; }

.pergunta summary::after {
    content: "+";
    color: var(--acao);
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pergunta[open] summary::after { content: "−"; }

/*
 * A altura e escrita em `max-height` pelo `publico.js`, medida no momento de
 * abrir. Nao da para deixar so no CSS: `height: auto` nao transiciona, e o
 * <details> fechado esconde o conteudo pela folha do proprio navegador, entao
 * nao haveria de onde partir a animacao.
 *
 * `overflow: hidden` e o que recorta o texto enquanto a caixa cresce. Sem ele
 * a resposta apareceria inteira de cara, por cima da pergunta seguinte.
 */
.pergunta-corpo {
    overflow: hidden;
    transition: max-height 0.28s ease;
}

/*
 * Espacamento por `padding` no corpo, e nao por `margin` no paragrafo.
 *
 * Margem do filho fica de fora do `scrollHeight` que a medicao usa, entao a
 * caixa pararia alguns pixels antes do fim do texto - e o ultimo trecho
 * apareceria cortado justamente no fim da animacao.
 */
.pergunta-corpo p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--texto-suave);
    margin: 0;
    padding-top: var(--e3);
}

/* Quem pediu menos movimento no sistema recebe a troca instantanea. A
   informacao e a mesma; a animacao e enfeite. */
@media (prefers-reduced-motion: reduce) {
    .pergunta-corpo { transition: none; }
}

/* ---------- Fechamento e rodape ---------- */

.fechamento {
    text-align: center;
    padding: 90px var(--e4);
    background:
        radial-gradient(ellipse 800px 380px at 50% 110%, rgba(250, 121, 33, 0.16), transparent 70%),
        var(--fundo-elevado);
    border-top: 1px solid var(--borda);
}

.fechamento h2 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.25; max-width: 700px; margin: 0 auto var(--e3); }
.fechamento p { font-size: 18px; color: var(--texto-suave); max-width: 560px; margin: 0 auto var(--e4); }

/*
 * A regra acima vale para todo <p> da secao - inclusive a nota de preco, que e
 * um <p>. Como ela zera a margem de topo e ganha por especificidade, a nota
 * ficava encostada nos botoes: nao era margem pequena, era margem nenhuma.
 *
 * No topo da pagina o problema nao aparece porque la nao existe regra
 * equivalente para paragrafo.
 */
.fechamento .abertura-nota { margin-top: var(--e4); }

.rodape {
    padding: var(--e4);
    border-top: 1px solid var(--borda);
    text-align: center;
    font-size: var(--apoio);
    color: var(--texto-tenue);
}

.rodape a { color: var(--texto-suave); }
.rodape-linha { margin-bottom: 10px; }

.rodape-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: center;
}

.rodape-links a { text-decoration: none; }
.rodape-links a:hover { color: var(--texto-claro); text-decoration: underline; }

/* ---------- Revelacao ao rolar ---------- */

/*
 * A classe so e aplicada pelo JavaScript, e apenas quando ha suporte a
 * IntersectionObserver e o sistema nao pediu menos movimento. Sem JavaScript,
 * nada disso existe e o conteudo aparece normalmente.
 */
.revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.revelar.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .revelar { opacity: 1; transform: none; transition: none; }
    .funcionalidade:hover { transform: none; }
    html { scroll-behavior: auto; }
}

@media (max-width: 760px) {
    .comparacao { grid-template-columns: 1fr; }
    .faixa { padding: var(--e5) var(--e3); }
    .abertura { padding: 64px var(--e3) 56px; }
    .titulo-secao { font-size: 27px; }
    .topo-interno { padding: 12px var(--e3); }
    .botao-topo { padding: 8px 14px; font-size: 13px; }
    .topo .marca-nome { font-size: 17px; }
}

/* Celulares estreitos: a marca e os dois botoes so cabem na mesma linha se
   ambos encolherem. Nenhum dos dois pode sair - "Entrar" e o caminho de quem
   ja e cliente, e "Criar conta" e o da pessoa que acabou de conhecer o produto. */
@media (max-width: 420px) {
    .topo-interno { padding: 10px 14px; gap: 8px; }
    .topo .marca { gap: 8px; }
    .topo .marca svg { width: 27px; height: 27px; }
    .topo .marca-nome { font-size: 15px; }
    .topo-acoes { gap: 4px; }
    .botao-topo { font-size: 12px; }
    .botao-topo.entrar { padding: 8px 10px; }
    .botao-topo.criar { padding: 8px 12px; }
    .botao-grande { padding: 14px 24px; width: 100%; justify-content: center; }
    .abertura-acoes { width: 100%; }
}