/* ==========================================================================
   LP Pintura Predial — bloco duplo
   (A) .lp-depoimento   — "Soluções para fachadas" + mockup de celular
   (B) .lp-investimento — "Quanto custa contratar uma empresa de pintura predial?"

   Só tokens de variables.css. Cores cruas (#212121 / #454545 / #555 / #1F3A5F)
   seguem o padrão já usado nas seções institucionais claras.
   Botão: .srv-cta__btn (assets/css/servico-cta.css) — não redefinido aqui.
   ========================================================================== */

/* ==========================================================================
   (A) Soluções para fachadas — depoimento em vídeo
   ========================================================================== */

.lp-depoimento {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-bg-light);
    padding: var(--section-pad-xl) 0;
}

/* Transição com a seção do método: NENHUM elemento aqui. O .method
   institucional já termina com clip-path próprio (cantos inferiores em
   diagonal) — sobre o lavanda #EEF2FB essa é exatamente a costura do mockup.
   Qualquer forma extra nesta borda cria zigzag duplicado. */

/* Marca d'água: sketch arquitetônico em perspectiva (asset definitivo),
   ancorado ao canto INFERIOR ESQUERDO. A arte já vem no tom cinza-claríssimo
   final — sem opacidade adicional. */
.lp-depoimento__watermark {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(420px, 52vw, 820px);
    aspect-ratio: 1162 / 481;
    background: url('../images/lp/watermark-sketch-edificio.webp') no-repeat left bottom / contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.lp-depoimento__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* Coluna direita larga: o contêiner de contorno envolve celular + card */
    grid-template-columns: minmax(0, 1fr) clamp(340px, 38vw, 540px);
    gap: clamp(32px, 4vw, 80px);
    align-items: center;
}

/* ---- Coluna esquerda: texto ---- */

.lp-depoimento__content {
    max-width: min(100%, clamp(360px, 46vw, 620px));
}

.lp-depoimento__label {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.63vw, 12px);
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #212121;
    margin-bottom: clamp(6px, 0.42vw, 8px);
}

.lp-depoimento__line {
    width: var(--line-width);
    height: 0;
    border-top: 1px solid var(--color-primary);
    flex-shrink: 0;
}

.lp-depoimento__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-section-lg);
    line-height: 1.22;
    color: #212121;
    max-width: 560px;
    margin-bottom: clamp(12px, 1.04vw, 20px);
    text-wrap: balance;
}

.lp-depoimento__title span {
    color: var(--color-primary);
}

.lp-depoimento__desc {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #555;
    max-width: 540px;
    margin-bottom: 0;
    text-wrap: pretty;
}

/* Moldura do CTA: geometria de .srv-cta__action; só a cor do anel muda
   (o branco translúcido do padrão sumiria sobre fundo claro). */
.lp-depoimento__cta-frame {
    display: inline-flex;
    margin-top: clamp(24px, 2.08vw, 40px);
}

.lp-depoimento__cta-frame::before {
    /* Borda em gradiente 45°: transparente no canto inferior esquerdo,
       azul-claro no superior direito — é o que faz o contorno "sumir e
       aparecer". O recorte de 1px vem do mask-composite de .srv-cta__action. */
    background: linear-gradient(45deg, transparent 38%, #BBD3EE 100%);
}

/* ---- Coluna direita: contêiner de contorno + celular + card ---- */

/* A media É o contêiner de contorno: padding generoso (mais à direita e
   embaixo), com o traçado fino desenhado pelo ::before. */
.lp-depoimento__media {
    /* ~45% da largura do contêiner (que é ~38vw) → 17vw */
    --dep-chamfer: clamp(130px, 17vw, 245px);
    position: relative;
    width: 100%;
    padding:
        clamp(36px, 3.6vw, 60px)
        clamp(28px, 3vw, 56px)
        clamp(32px, 3.2vw, 60px)
        clamp(18px, 2vw, 36px);
}

/* Contorno fino azul-claro, cantos ~24px, canto superior esquerdo CHANFRADO
   (o clip corta a borda na diagonal; o ::after desenha o segmento que falta). */
.lp-depoimento__media::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(187, 211, 238, 0.9);
    border-radius: 0 clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px) clamp(18px, 1.8vw, 26px);
    clip-path: polygon(
        0 var(--dep-chamfer),
        var(--dep-chamfer) 0,
        100% 0,
        100% 100%,
        0 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Segmento diagonal da borda no chanfro — de (0,C) a (C,0), C·√2 a -45°. */
.lp-depoimento__media::after {
    content: '';
    position: absolute;
    top: var(--dep-chamfer);
    left: 0;
    width: calc(var(--dep-chamfer) * 1.41422);
    height: 0;
    border-top: 1px solid rgba(187, 211, 238, 0.9);
    transform: rotate(-45deg);
    transform-origin: 0 0;
    pointer-events: none;
    z-index: 0;
}

/* Celular: bezel navy grosso + fio externo azul-aço (mesma moldura em dois
   tons do lp-recomendam), posicionado à esquerda dentro do contêiner. */
/* Moldura IDÊNTICA à do celular do lp-recomendam: bezel navy + anel externo
   azul-aço com a MESMA espessura (dois tons, sem vão). */
.lp-depoimento__phone {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: clamp(230px, 17.6vw, 290px);
    aspect-ratio: 9 / 18.5;
    margin: 0 auto 0 clamp(12px, 2.4vw, 44px);
    overflow: hidden;
    border: clamp(4.8px, 0.44vw, 8px) solid #1F3A5F;
    border-radius: clamp(28px, 2.6vw, 40px);
    background: var(--color-dark);
    box-shadow:
        0 0 0 clamp(4.8px, 0.44vw, 8px) #3D5F8A,
        0 24px 56px rgba(19, 23, 26, 0.20);
    z-index: 1;
}


/* Vídeo do Vimeo preenchendo a tela do celular (mesmo padrão do lp-recomendam).
   O overflow:hidden + raio do .lp-depoimento__phone recortam os cantos. */
.lp-depoimento__phone-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1;
}
.lp-depoimento__phone-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Véu MUITO sutil no rodapé — no mockup a foto fica limpa; a legibilidade
   da legenda vem da sombra de texto, não de overlay. */
.lp-depoimento__phone-shade {
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(19, 23, 26, 0) 0%, rgba(19, 23, 26, 0.28) 70%, rgba(19, 23, 26, 0.45) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Legenda estilo subtitle de vídeo: CENTRADA, a ~27% da base da tela. */
.lp-depoimento__phone-caption {
    position: absolute;
    left: clamp(16px, 1.25vw, 22px);
    right: clamp(16px, 1.25vw, 22px);
    bottom: 27%;
    z-index: 2;
    margin: 0;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.4;
    text-align: center;
    color: var(--color-white);
    text-shadow: 0 1px 3px rgba(10, 15, 21, 0.65), 0 3px 10px rgba(10, 15, 21, 0.35);
}

/* Card de citação: canto inferior direito do CONTÊINER, sobrepondo a lateral
   direita do celular (dentro do contorno, não vazando pra fora). */
.lp-depoimento__quote {
    position: absolute;
    /* Rente à linha do contorno, como no mockup */
    right: 0;
    bottom: clamp(16px, 1.8vw, 32px);
    z-index: 3;
    width: max-content;
    max-width: min(300px, 78%);
    margin: 0;
    padding: clamp(16px, 1.35vw, 24px);
    background: var(--color-white);
    border-radius: clamp(12px, 1vw, 16px);
    box-shadow: 0 18px 40px rgba(19, 23, 26, 0.14);
}

/* Aspas gigantes atrás da 1ª linha do texto (marca d'água interna do card) */
.lp-depoimento__quote-mark {
    position: absolute;
    top: clamp(8px, 0.7vw, 12px);
    left: clamp(10px, 0.9vw, 16px);
    width: clamp(38px, 3.2vw, 52px);
    height: auto;
    color: #EFF2F6;
    z-index: 0;
    pointer-events: none;
}

.lp-depoimento__quote-text {
    position: relative;
    z-index: 1;
    margin: 0 0 clamp(10px, 0.83vw, 14px);
}

.lp-depoimento__quote-text p {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 1.6;
    color: #454545;
    margin: 0;
}

.lp-depoimento__quote-foot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(10px, 0.83vw, 16px);
}

.lp-depoimento__quote-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lp-depoimento__quote-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-caption);
    line-height: 1.3;
    color: var(--color-primary);
}

.lp-depoimento__quote-role {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-caption-sm);
    line-height: 1.3;
    color: #888;
}

.lp-depoimento__quote-dots {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.31vw, 6px);
    flex-shrink: 0;
    padding-bottom: 2px;
}

.lp-depoimento__dot {
    width: clamp(5px, 0.42vw, 6px);
    height: clamp(5px, 0.42vw, 6px);
    border-radius: 999px;
    background: var(--color-text-light);
}

.lp-depoimento__dot--active {
    width: clamp(14px, 1.15vw, 18px);
    background: #1F3A5F;
}

/* ==========================================================================
   (B) Investimento — colagem à esquerda, texto à direita
   ========================================================================== */

.lp-investimento {
    background: var(--color-white);
    padding: var(--section-pad-xl) 0;
}

.lp-investimento__inner {
    display: grid;
    grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
}

/* ---- Colagem de fotos ---- */

/* Mosaico FECHADO: a célula A (alta) dita a altura das duas primeiras
   linhas (1fr cada) e B/C se ESTICAM para preenchê-las — aspect-ratio em
   B/C brigava com a altura da linha e abria vãos brancos. Todas as fotos
   são absolute/cover dentro da célula. */
.lp-investimento__gallery {
    display: grid;
    /* Proporções medidas no mockup: coluna esquerda 36%, direita 64%; e a linha
       do MEIO (C) levemente mais alta que a de cima (B) — 25/28. */
    grid-template-columns: 36fr 64fr;
    grid-template-rows: 25fr 28fr auto;
    gap: clamp(8px, 0.83vw, 12px);
}

.lp-investimento__cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: clamp(10px, 0.83vw, 12px);
    background: #E8E8E8;
}

.lp-investimento__cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A — coluna esquerda, retrato alto: a ÚNICA com proporção própria,
   que define a altura do bloco superior do mosaico */
.lp-investimento__cell--a {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    /* A proporção da CÉLULA é ditada pelo grid, não pelo arquivo: ela ocupa as
       duas primeiras linhas, e o cover recorta a foto. Usar a proporção do
       arquivo aqui encolhe a célula e achata o mural inteiro. */
    aspect-ratio: 53 / 100;
}

/* Acento vertical LARANJA na borda direita da célula A (par do filete azul
   sob a C). Fica na metade de baixo, sangrando no vão entre as colunas. */
.lp-investimento__cell--a::after {
    content: '';
    position: absolute;
    right: calc(-1 * clamp(4px, 1.2vw, 7px));
    bottom: 6%;
    width: clamp(4px, 1.2vw, 7px);
    height: 42%;
    background: var(--color-primary);
    pointer-events: none;
}

/* B — coluna direita, linha 1 (estica até a metade da altura de A) */
.lp-investimento__cell--b {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

/* B NÃO leva clip-path: o chanfro do canto superior direito já vem recortado
   no arquivo (transparência); recortar de novo cortaria a foto duas vezes.
   Sem aspect-ratio própria — quem manda é a linha do grid. */
.lp-investimento__cell--b {
    /* Fundo TRANSPARENTE: o chanfro do arquivo precisa deixar ver o fundo da
       seção. Com o cinza de placeholder embaixo, a dobra aparecia cinza —
       parecia um recorte falso. Não há clip-path aqui: a forma vem do arquivo. */
    background: transparent;
}

.lp-investimento__cell--b img {
    /* Ancora no topo: é lá que mora o chanfro, que o cover cortaria. */
    object-position: center top;
}

/* C — coluna direita, linha 2, com o filete AZUL parcial na base */
.lp-investimento__cell--c {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.lp-investimento__cell--c::after {
    content: '';
    position: absolute;
    /* Acento parcial: começa na metade da célula e morre perto da borda direita */
    left: 49%;
    width: 39%;
    bottom: 0;
    height: clamp(4px, 0.42vw, 7px);
    background: #155EEF;
    pointer-events: none;
}

/* D — largura total, ~2:1 (bem mais alta que uma tira panorâmica) */
.lp-investimento__cell--d {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    aspect-ratio: 484 / 246;
}

/* ---- Texto ---- */

.lp-investimento__content {
    max-width: min(100%, clamp(360px, 56vw, 760px));
}

.lp-investimento__label {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.63vw, 12px);
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #212121;
    margin-bottom: clamp(6px, 0.42vw, 8px);
}

.lp-investimento__line {
    width: var(--line-width);
    height: 0;
    border-top: 1px solid var(--color-primary);
    flex-shrink: 0;
}

.lp-investimento__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-section-lg);
    line-height: 1.22;
    color: #212121;
    max-width: 620px;
    margin-bottom: clamp(16px, 1.25vw, 24px);
    text-wrap: balance;
}

.lp-investimento__text {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body-sm);
    line-height: 1.7;
    color: #454545;
    margin-bottom: clamp(10px, 0.83vw, 14px);
    text-wrap: pretty;
}

.lp-investimento__text:last-of-type {
    margin-bottom: 0;
}

.lp-investimento__text strong {
    font-weight: 600;
    color: var(--color-primary);
}

.lp-investimento__cta {
    display: inline-flex;
    margin-top: clamp(20px, 1.67vw, 32px);
}

.lp-investimento__cta::before {
    /* Borda em gradiente 45°: transparente no canto inferior esquerdo,
       azul-claro no superior direito — é o que faz o contorno "sumir e
       aparecer". O recorte de 1px vem do mask-composite de .srv-cta__action. */
    background: linear-gradient(45deg, transparent 38%, #BBD3EE 100%);
}

/* CTA duplicado pós-colagem: existe só no fluxo mobile (ligado no media query) */
.lp-investimento__cta-mobile {
    display: none;
}

/* ==========================================================================
   Responsivo (mobile básico — foco desktop nesta rodada)
   ========================================================================== */

@media (max-width: 900px) {
    .lp-depoimento,
    .lp-investimento {
        padding: var(--section-pad-lg) 0;
    }

    .lp-depoimento__watermark {
        width: 300px;
    }

    /* O contorno com chanfro no topo esquerdo APARECE no mobile (estava
       escondido): é ele que emoldura o celular no mockup. O chanfro cai para a
       escala da coluna estreita — em vw com piso e teto em px. */
    .lp-depoimento__media {
        --dep-chamfer: clamp(78px, 24vw, 110px);
        padding:
            clamp(20px, 6vw, 30px)
            clamp(14px, 4vw, 22px)
            clamp(24px, 7vw, 34px)
            clamp(12px, 3.5vw, 20px);
    }

    .lp-depoimento__inner,
    .lp-investimento__inner {
        grid-template-columns: 1fr;
        gap: var(--gap-lg);
    }

    .lp-depoimento__content,
    .lp-investimento__content {
        max-width: 100%;
    }

    /* Mockup mobile: texto/CTA PRIMEIRO, celular depois (sem order) */
    .lp-depoimento__media {
        max-width: min(340px, 92vw);
        margin-inline: auto;
    }

    .lp-depoimento__cta-frame,
    .lp-depoimento__cta-frame .srv-cta__btn {
        width: 100%;
    }

    .lp-depoimento__cta-frame .srv-cta__btn {
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    /* Investimento: texto primeiro, colagem depois, CTA mobile após a colagem */
    .lp-investimento__gallery {
        order: 2;
    }

    .lp-investimento__cta {
        display: none;
    }

    .lp-investimento__cta-mobile {
        display: inline-flex;
        order: 3;
        width: 100%;
        margin-top: clamp(4px, 1vw, 8px);
    }

    .lp-investimento__cta-mobile::before {
        /* Borda em gradiente 45°: transparente no canto inferior esquerdo,
       azul-claro no superior direito — é o que faz o contorno "sumir e
       aparecer". O recorte de 1px vem do mask-composite de .srv-cta__action. */
    background: linear-gradient(45deg, transparent 38%, #BBD3EE 100%);
    }

    .lp-investimento__cta-mobile .srv-cta__btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .lp-depoimento__phone {
        margin: 0 auto;
    }

    /* relative (não static): o card precisa continuar sendo o bloco de contenção
       das aspas decorativas, que são absolute. Com static a âncora subia para
       .lp-depoimento__media e o ornamento ia parar 450px acima, fora do card. */
    .lp-depoimento__quote {
        position: relative;
        max-width: 100%;
        margin-top: -28px;
        margin-left: auto;
        margin-right: auto;
        width: auto;
    }
}