/* ========================================================= */
/* -- LP REFORMAS E RETROFIT — só o exclusivo desta página -- */
/*                                                            */
/* Ordem de carga: lp-base.css → lp-componentes.css → este.   */
/* O tema (.lp-page--retrofit) fica no fim do                 */
/* lp-componentes.css, junto dos outros cinco.                */
/*                                                            */
/* Regra da casa: bloco que uma segunda LP passar a usar sai  */
/* daqui e sobe para o lp-componentes.css. Não duplicar.      */
/* ========================================================= */

/* --------------------------------------------------------- */
/* -- begin:: Hero — véu próprio desta capa -- */
/* A foto é a entrada de um condomínio já entregue: parede    */
/* branca, guarita de vidro e céu. Claro dos dois lados, ao   */
/* contrário das outras capas, que têm um lado escuro para o  */
/* texto pousar. Com o véu genérico (foto a 0.22, 0.95→0.72)  */
/* a foto sumia; sem véu nenhum, o texto branco sumia.        */
/*                                                            */
/* Medido pixel a pixel na coluna do texto (6%→48% da         */
/* largura), já com a foto composta e o gradiente aplicado —  */
/* o valor abaixo é o PIOR ponto encontrado, não a média:     */
/*   branco #fff ......................... 7,42:1            */
/*   lead (branco a 88%) ................. 6,24:1            */
/*   <em> do h1 em --lp-highlight ........ 4,44:1            */
/* O h1 conta como texto grande (mínimo 3:1), então sobra     */
/* margem até no ponto mais claro da foto.                    */
/* --------------------------------------------------------- */
.lp-page--retrofit .lp-hero__bg { opacity: 0.60; }

.lp-page--retrofit .lp-hero__overlay {
    background: linear-gradient(105deg,
                rgba(var(--lp-deep-rgb), 0.70) 40%,
                rgba(var(--lp-deep-rgb), 0.46) 100%);
}

/* A etiqueta do topo não sobrevive a um véu tão aliviado se
   depender do que passa por trás. Ganha fundo próprio, como
   já foi feito na LP de manutenção. */
.lp-page--retrofit .lp-hero__tag {
    background: rgba(var(--lp-deep-rgb), 0.58);
}

/* --------------------------------------------------------- */
/* -- begin:: Escala do retrofit -- */
/* Seção exclusiva desta página. O que trava uma reforma de   */
/* área comum nunca é a técnica, é o valor — e o valor        */
/* depende de uma escolha que o síndico ainda não fez.        */
/* Os três cards existem para ele se localizar antes de       */
/* pedir preço, e para a lead chegar já dizendo o tamanho.    */
/*                                                            */
/* Sem imagem, de propósito: é bloco de meio de página e não  */
/* pode custar requisição.                                    */
/* --------------------------------------------------------- */
.lp-niveis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.lp-nivel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 24px 22px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.05),
                0 10px 24px rgba(var(--lp-deep-rgb), 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-nivel:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(var(--lp-deep-rgb), 0.14);
}

/* O do meio é o que a maioria dos condomínios acaba
   contratando. Ganha o acento como borda em vez de um fundo
   colorido: fundo pastel aqui competiria com o card do
   formulário e com a própria seção, que já é --lp-soft. */
.lp-nivel--destaque {
    border-color: var(--lp-accent);
    box-shadow: 0 1px 2px rgba(var(--lp-accent-rgb), 0.10),
                0 14px 30px rgba(var(--lp-accent-rgb), 0.14);
}

/* Medidor de escala: três barras, uma acesa por nível. O
   texto ao lado já diz a mesma coisa, então o span é
   aria-hidden — isto é só o atalho visual de quem bate o
   olho na grade antes de ler os títulos. */
.lp-nivel__grau {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
}

.lp-nivel__grau i {
    width: 26px;
    height: 5px;
    border-radius: 1px;
    background: rgba(var(--lp-accent-rgb), 0.16);
}

.lp-nivel__grau i.is-on { background: var(--lp-accent); }

.lp-nivel__nome {
    font-family: 'Sora', 'Poppins', sans-serif;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--lp-deep);
    margin-bottom: 8px;
}

.lp-nivel__resumo {
    font-size: 0.94rem;
    line-height: 1.55;
    color: #5a5750;
    margin-bottom: 18px;
}

.lp-nivel__lista {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    /* empurra o pé do card para baixo, alinhando os três */
    flex-grow: 1;
}

.lp-nivel__lista li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    font-size: 0.93rem;
    line-height: 1.5;
    color: #46433d;
}

.lp-nivel__lista li:last-child { margin-bottom: 0; }

/* Traço em vez de bolinha: a lista aqui é escopo, não
   benefício — o check já é usado no card do documento e na
   grade de garantias, e repeti-lo achataria a diferença. */
.lp-nivel__lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 2px;
    background: var(--lp-accent);
}

.lp-nivel__pe {
    padding-top: 16px;
    border-top: 1px solid var(--lp-line);
}

.lp-nivel__pe span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* #7d7970 dava 4,34:1 sobre branco e reprovava no AA para
       texto pequeno; este fecha em 5,01:1. */
    color: #736f66;
    margin-bottom: 4px;
}

.lp-nivel__pe strong {
    font-size: 0.94rem;
    color: var(--lp-accent);
}

.lp-niveis__nota {
    max-width: 760px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #5a5750;
}

.lp-niveis__nota strong { color: var(--lp-deep); }

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

@media (max-width: 767px) {
    .lp-niveis { gap: 13px; }
    .lp-nivel { padding: 22px 20px 18px; }
    .lp-nivel:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-nivel { transition: none; }
    .lp-nivel:hover { transform: none; }
}