/* ========================================================= */
/* -- LP LAVAGEM PREDIAL E TELHADO — só o exclusivo daqui -- */
/*                                                            */
/* Ordem de carga: lp-base.css → lp-componentes.css → este.   */
/* O tema (.lp-page--lavagem) fica no fim do                  */
/* lp-componentes.css, junto dos outros seis.                 */
/*                                                            */
/* 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 é um operário por corda lavando a fachada, com a    */
/* faixa já limpa aparecendo ao lado da lança. Fundo de céu   */
/* claro à esquerda, que é justamente a coluna do texto —     */
/* com o véu genérico (foto a 0.22) a foto morria; com a foto */
/* forte demais, o texto branco sumia contra o céu.           */
/*                                                            */
/* Medido pixel a pixel na coluna do texto (6%→48% da         */
/* largura), com a foto composta e o gradiente aplicado. O    */
/* valor abaixo é o PIOR ponto encontrado, não a média:       */
/*   branco #fff ......................... 8,27:1             */
/*   lead (branco a 88%) ................. 6,85:1             */
/*   <em> do h1 em --lp-highlight ........ 4,64:1             */
/* O <em> do h1 conta como texto grande (mínimo 3:1).         */
/* --------------------------------------------------------- */
.lp-page--lavagem .lp-hero__bg { opacity: 0.58; }

.lp-page--lavagem .lp-hero__overlay {
    background: linear-gradient(103deg,
                rgba(var(--lp-deep-rgb), 0.75) 42%,
                rgba(var(--lp-deep-rgb), 0.47) 100%);
}

/* Etiqueta do topo com fundo próprio: sobre céu aberto ela
   não sobrevive dependendo só do gradiente. */
.lp-page--lavagem .lp-hero__tag {
    background: rgba(var(--lp-deep-rgb), 0.60);
}

/* --------------------------------------------------------- */
/* -- begin:: Tipos de sujeira -- */
/* Seção exclusiva desta página. Quem pede orçamento de       */
/* lavagem acha que está comprando "jato de água", e é aí     */
/* que a proposta barata ganha: ela cobra por metro quadrado  */
/* de água, não por remover o que está grudado. As quatro     */
/* fichas existem para o síndico descobrir, antes de comparar */
/* preço, que a sujeira dele tem nome e tratamento próprio.   */
/*                                                            */
/* Sem imagem, de propósito: é bloco de meio de página e não  */
/* pode custar requisição.                                    */
/* --------------------------------------------------------- */
.lp-sujeiras {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.lp-sujeira {
    position: relative;
    padding: 24px 24px 20px 28px;
    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);
    overflow: hidden;
}

/* Filete vertical no lugar de um ícone: os cards de escopo
   desta mesma página já são uma grade de ícones, e repetir a
   forma aqui faria as duas seções se confundirem ao rolar. */
.lp-sujeira::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--lp-accent);
}

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

.lp-sujeira__onde {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* 5,01:1 sobre branco — texto pequeno precisa passar no AA */
    color: #736f66;
    margin-bottom: 14px;
}

.lp-sujeira__tira {
    font-size: 0.94rem;
    line-height: 1.6;
    color: #46433d;
    margin-bottom: 14px;
}

.lp-sujeira__risco {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding-top: 13px;
    border-top: 1px solid var(--lp-line);
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5a5750;
}

.lp-sujeira__risco .ico {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--lp-accent);
}

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

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

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

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

@media (max-width: 767px) {
    .lp-sujeiras { gap: 13px; }
    .lp-sujeira { padding: 20px 20px 17px 24px; }
}

/* --------------------------------------------------------- */
/* -- begin:: Refino visual — 31/08/2026 -- */
/* O tema nasceu com o par --lp-soft em rosa cheio, e como as */
/* seções claras usam essa variável de fundo, metade da       */
/* página ficava rosa. O par virou neutro quente no           */
/* lp-componentes.css; aqui fica o resto do ajuste, que é     */
/* devolver a framboesa aos pontos de acento para a página    */
/* não ficar lavada depois da troca.                          */
/*                                                            */
/* Tudo escopado em .lp-page--lavagem: as outras seis LPs     */
/* continuam com o âmbar e o navy dos blocos genéricos.       */
/* --------------------------------------------------------- */

/* Título de seção em vinho no lugar do navy fixo: com o fundo
   neutro, o navy era a única coisa azul sobrando na página. */
.lp-page--lavagem .lp-head__title { color: var(--lp-deep); }

/* --------------------------------------------------------- */
/* -- Cards de sinal -- */
/* O bloco genérico marca alerta com âmbar. Aqui o âmbar
   brigava com a framboesa a dois palmos de distância — e são
   seis cards lado a lado, então o ruído aparecia inteiro de
   uma vez. Passa a ser o acento do tema, com o ícone dentro
   do contêiner em forma de gota que já é a assinatura desta
   LP (--lp-icon-radius).                                     */
/* --------------------------------------------------------- */
.lp-page--lavagem .lp-symptom {
    border-left-width: 3px;
    border-left-color: var(--lp-accent);
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.04);
}

.lp-page--lavagem .lp-symptom:hover {
    box-shadow: 0 16px 34px rgba(var(--lp-deep-rgb), 0.11);
}

.lp-page--lavagem .lp-symptom__icon {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 9px;
    color: var(--lp-accent);
    fill: var(--lp-accent);
    background: var(--lp-soft-2);
    border-radius: var(--lp-icon-radius);
    margin-bottom: 16px;
    transition: background 0.2s ease;
}

.lp-page--lavagem .lp-symptom:hover .lp-symptom__icon {
    background: rgba(var(--lp-accent-rgb), 0.13);
}

/* --------------------------------------------------------- */
/* -- Fichas de sujeira -- */
/* Ganharam hover para não parecerem o único bloco morto da
   página, agora que os cards de sinal reagem.               */
/* --------------------------------------------------------- */
.lp-sujeira {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-sujeira:hover {
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.05),
                0 18px 38px rgba(var(--lp-deep-rgb), 0.10);
}

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

@media (max-width: 575px) {
    .lp-page--lavagem .lp-symptom__icon {
        width: 18px;
        height: 18px;
        padding: 7px;
        margin-bottom: 12px;
    }
}

/* --------------------------------------------------------- */
/* -- begin:: Cards de escopo (.lp-typecard) — 31/08/2026 -- */
/* Seis cards em grade, todos com o mesmo peso visual: ícone  */
/* pálido, título e um texto longo, e a etiqueta do rodapé    */
/* quase sumindo depois que o --lp-soft-2 virou neutro. O     */
/* olho não achava onde entrar em cada card.                  */
/*                                                            */
/* Ajuste: o ícone ganha presença e vira o ponto de entrada   */
/* (preenche no hover), o título respira, e a etiqueta passa  */
/* a ser um selo do tema em vez de uma pílula cinza solta.    */
/* --------------------------------------------------------- */
.lp-page--lavagem .lp-typecard {
    padding: 28px 26px 24px;
    box-shadow: 0 1px 2px rgba(var(--lp-deep-rgb), 0.04);
}

.lp-page--lavagem .lp-typecard__icon {
    width: 48px;
    height: 48px;
    background: rgba(var(--lp-accent-rgb), 0.09);
    border: 1px solid rgba(var(--lp-accent-rgb), 0.16);
    margin-bottom: 18px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lp-page--lavagem .lp-typecard__icon .ico { width: 22px; height: 22px; }

/* No hover o ícone preenche: é o único elemento do card que
   pode mudar de cor sem mexer na leitura do texto. */
.lp-page--lavagem .lp-typecard:hover .lp-typecard__icon {
    background: var(--lp-accent);
    border-color: var(--lp-accent);
    color: #fff;
}

.lp-page--lavagem .lp-typecard__title {
    font-size: 1.08rem;
    line-height: 1.35;
    margin-bottom: 11px;
}

.lp-page--lavagem .lp-typecard__desc {
    line-height: 1.62;
    margin-bottom: 20px;
}

/* Etiqueta: selo do tema. Fundo lavado de framboesa e borda
   da mesma família — sobre branco dá 6,6:1, passa no AA para
   texto pequeno. */
.lp-page--lavagem .lp-typecard__norma {
    background: rgba(var(--lp-accent-rgb), 0.07);
    border-color: rgba(var(--lp-accent-rgb), 0.28);
    color: var(--lp-accent);
}

@media (max-width: 767px) {
    .lp-page--lavagem .lp-typecard { padding: 22px 20px 20px; }
    .lp-page--lavagem .lp-typecard__icon {
        width: 42px;
        height: 42px;
        margin-bottom: 14px;
    }
    .lp-page--lavagem .lp-typecard__icon .ico { width: 19px; height: 19px; }
    .lp-page--lavagem .lp-typecard__title { font-size: 1rem; }
}

/* --------------------------------------------------------- */
/* -- begin:: Etapas na seção vinho — 31/08/2026 -- */
/* Seis caixas idênticas sobre o fundo escuro, com o número   */
/* solto no topo: não havia nada indicando que aquilo é uma   */
/* sequência, e o card a 5% de branco quase não descolava do  */
/* fundo. O número passa a puxar um filete até a borda do     */
/* card — leitura de linha do tempo sem gastar markup — e o   */
/* card ganha superfície e reação ao hover.                   */
/* --------------------------------------------------------- */
.lp-page--lavagem .lp-step {
    padding: 26px 24px 24px;
    background: rgba(255, 255, 255, 0.065);
    border-color: rgba(255, 255, 255, 0.14);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lp-page--lavagem .lp-step:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(243, 174, 208, 0.42); /* --lp-highlight a 42% */
}

/* O filete sai do número e morre antes da borda direita:
   sugere continuidade sem virar uma régua fechada. */
.lp-page--lavagem .lp-step__num {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.lp-page--lavagem .lp-step__num::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
                rgba(255, 255, 255, 0.28) 0%,
                rgba(255, 255, 255, 0) 100%);
}

.lp-page--lavagem .lp-step__title {
    font-size: 1.06rem;
    line-height: 1.35;
    margin-bottom: 9px;
}

.lp-page--lavagem .lp-step__desc { line-height: 1.62; }

@media (prefers-reduced-motion: reduce) {
    .lp-page--lavagem .lp-step:hover { transform: none; }
}

@media (max-width: 767px) {
    .lp-page--lavagem .lp-step { padding: 22px 20px; }
    .lp-page--lavagem .lp-step__num { gap: 11px; margin-bottom: 13px; }
    .lp-page--lavagem .lp-step__title { font-size: 1rem; }
}