/* ========================================================= */
/* -- LP IMPERMEABILIZAÇÃO -- */
/* Só o que é exclusivo desta página. Hero, formulário,       */
/* seções, cards de serviço, comparativo, etapas, prévia de   */
/* documento, registro fotográfico, FAQ, CTA e rodapé vêm do  */
/* lp-componentes.css, carregado antes deste arquivo.         */
/* ========================================================= */

/* --------------------------------------------------------- */
/* -- begin:: Corte das camadas do sistema -- */
/* O visitante quase sempre imagina impermeabilização como    */
/* "passar uma tinta". O corte mostra que o que dura é o      */
/* conjunto de camadas — e que pular uma delas é o que faz o  */
/* serviço barato voltar a vazar.                             */
/*                                                            */
/* Desenhado só com borda e fundo: nada de imagem, para não   */
/* pesar numa seção que fica no meio da página.               */
/* --------------------------------------------------------- */
.lp-corte {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-camada {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-left: 5px solid var(--lp-blue);
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-camada:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 26px rgba(15, 37, 64, 0.08);
}

/* A base é a estrutura existente, não uma camada aplicada:
   fica cinza para não parecer parte do serviço vendido. */
.lp-camada--base {
    border-left-color: #9aa5b5;
    background: var(--lp-bg);
}

.lp-camada__num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(74, 144, 226, 0.12);
    color: var(--lp-navy-2);
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 0.82rem;
}

.lp-camada--base .lp-camada__num {
    background: rgba(154, 165, 181, 0.2);
    color: #5a6675;
}

.lp-camada__txt strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 0.97rem;
    color: var(--lp-navy);
    margin-bottom: 3px;
}

.lp-camada__txt span {
    display: block;
    font-size: 0.87rem;
    color: var(--lp-muted);
    line-height: 1.55;
}

/* Legenda do sentido da água, logo acima do corte */
.lp-corte__topo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: 700px;
    margin: 0 auto 14px;
    color: var(--lp-navy-2);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lp-corte__topo .ico { width: 15px; height: 15px; color: var(--lp-blue); }

/* --------------------------------------------------------- */
/* -- begin:: Cards de sistema impermeabilizante -- */
/* Diferente do .lp-typecard de propósito: aqui o título vem  */
/* numa faixa colorida no topo, porque o que o síndico        */
/* compara é o nome do sistema, não o texto.                  */
/* --------------------------------------------------------- */
.lp-sistema {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-sistema:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 37, 64, 0.1);
}

.lp-sistema__topo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--lp-navy);
    color: #fff;
}

.lp-sistema__topo .ico {
    width: 18px;
    height: 18px;
    color: var(--lp-blue);
    flex: 0 0 auto;
}

.lp-sistema__nome {
    margin: 0;
    font-size: 0.98rem;
    color: #fff;
    line-height: 1.35;
}

.lp-sistema__corpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 20px;
}

.lp-sistema__desc {
    font-size: 0.89rem;
    color: var(--lp-muted);
    margin: 0 0 16px;
}

/* Empurra as etiquetas para a base, alinhando os cards da linha */
.lp-sistema__uso {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--lp-line);
}

.lp-sistema__uso-titulo {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lp-navy-2);
    margin-bottom: 9px;
}

.lp-sistema__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lp-sistema__tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 100px;
    background: var(--lp-bg);
    border: 1px solid var(--lp-line);
    color: var(--lp-ink);
    font-size: 0.76rem;
}

/* --------------------------------------------------------- */
/* -- begin:: Ajustes de celular -- */
/* --------------------------------------------------------- */
@media (max-width: 575.98px) {
    .lp-camada { padding: 13px 15px; gap: 12px; }
    .lp-camada__num { width: 30px; height: 30px; font-size: 0.76rem; }
    .lp-camada__txt strong { font-size: 0.92rem; }
    .lp-camada__txt span { font-size: 0.83rem; }
    .lp-camada:hover { transform: none; }
    .lp-corte__topo { font-size: 0.72rem; }

    .lp-sistema__topo { padding: 13px 16px; }
    .lp-sistema__nome { font-size: 0.93rem; }
    .lp-sistema__corpo { padding: 16px; }
    .lp-sistema__desc { font-size: 0.85rem; margin-bottom: 13px; }
}