/* ==========================================================================
   LP Pintura Predial — HERO + BARRA DE INDICADORES
   Proporções e recortes espelham o hero institucional (.hero / .srv-hero).
   Depende de: variables.css, global.css (.hero__scroll) e servico-cta.css
   (.srv-cta__btn — o botão primário NÃO é redefinido aqui).
   ========================================================================== */

.lp-hero {
    position: relative;
    /* Mesma proporção do hero institucional (80vh, teto 800px, piso 320px).
       min-height (e não height) porque a LP tem mais conteúdo no bloco de texto. */
    min-height: clamp(320px, 80vh, 800px);
    display: flex;
    align-items: center;
    background-color: var(--color-bg-navy);
    overflow: hidden;
    /* A nav flutua por cima do hero: reserva espaço no topo. */
    padding-top: var(--hero-pad-top);
    padding-bottom: calc(var(--hero-clip-v) + var(--gap-lg));
    border-bottom: 1px solid var(--color-bg-light);
    /* Recorte diagonal no rodapé (canto inferior direito), igual .srv-hero */
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--hero-clip-v)),
        calc(100% - var(--hero-clip-h)) 100%,
        0 100%
    );
}

.lp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}

.lp-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Mantém o prédio e o cordista na metade direita do quadro. */
    object-position: 78% center;
}

/* Overlay institucional (gradiente triplo) + scrim navy à esquerda, que garante
   o contraste do texto sobre a foto.
   --lp-hero-navy-rgb é o RGB de --color-bg-navy (#0f2a47) em um único ponto:
   os stops precisam de alpha variável, o que exige a forma rgba(). */
.lp-hero__overlay {
    --lp-hero-navy-rgb: 15, 42, 71;
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(var(--lp-hero-navy-rgb), 0.94) 0%,
            rgba(var(--lp-hero-navy-rgb), 0.86) 32%,
            rgba(var(--lp-hero-navy-rgb), 0.42) 56%,
            rgba(var(--lp-hero-navy-rgb), 0) 76%),
        var(--hero-overlay);
    pointer-events: none;
}

.lp-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.lp-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-content);
    max-width: clamp(440px, 34vw, 660px);
}

.lp-hero__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-display);
    line-height: 1.15;
    color: var(--color-white);
    text-wrap: balance;
}

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

.lp-hero__description {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body-lg);
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--color-text-hero);
}

.lp-hero__area {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.6;
    letter-spacing: -0.01em;
    color: var(--color-text-light);
}

/* Moldura fina translúcida em volta do botão.
   A moldura em si vem de .srv-cta__action (assets/css/servico-cta.css) — aqui
   só o delta da LP. O elemento carrega as duas classes no HTML. */
.lp-hero__cta-frame {
    display: inline-flex;
    margin-top: clamp(6px, 0.52vw, 10px);
}

/* Ícone de headset do CTA — existe só no layout mobile (mockup);
   o desktop aprovado não o exibe. */
.lp-hero__cta-icon {
    display: none;
}

/* Linha de apoio abaixo do CTA: avatar + microcopy */
.lp-hero__meta {
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.83vw, 14px);
    margin-top: clamp(6px, 0.52vw, 10px);
    max-width: clamp(300px, 25vw, 460px);
}

/* Pastilha redonda do ícone de atendimento. Era uma foto com object-fit;
   agora é um contêiner que centraliza o glifo com folga. */
.lp-hero__meta-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(34px, 2.6vw, 44px);
    height: clamp(34px, 2.6vw, 44px);
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.39);
    background: rgba(255, 255, 255, 0.08);
}

.lp-hero__meta-avatar img {
    display: block;
    width: clamp(18px, 1.35vw, 22px);
    height: clamp(18px, 1.35vw, 22px);
}

.lp-hero__meta-text {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* Botão de scroll: reaproveita .hero__scroll (global.css), só muda a posição.
   Fica acima do chanfro diagonal para não ser cortado pelo clip-path. */
.lp-hero__scroll {
    left: auto;
    right: var(--container-padding);
    bottom: calc(var(--hero-clip-v) + clamp(6px, 0.52vw, 10px));
    transform: none;
}

/* ==========================================================================
   Barra de indicadores
   ========================================================================== */

.lp-stats {
    position: relative;
    background: var(--color-white);
    padding: var(--section-pad-lg) 0;
    overflow: hidden;
}

.lp-stats__watermark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(200px, 22vw, 380px);
    aspect-ratio: 1162 / 481;
    height: auto;
    background: url('../images/lp/watermark-sketch-edificio.webp') no-repeat left center / contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.lp-stats__inner {
    position: relative;
    z-index: 1;
}

.lp-stats__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.lp-stats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(6px, 0.42vw, 8px);
    padding: 0 var(--gap-sm);
}

.lp-stats__item + .lp-stats__item {
    border-left: 1px solid rgba(19, 23, 26, 0.08);
}

.lp-stats__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: clamp(2px, 0.21vw, 4px);
}

.lp-stats__icon img {
    display: block;
    width: clamp(26px, 2.1vw, 32px);
    height: clamp(26px, 2.1vw, 32px);
}

.lp-stats__number {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-heading-sm);
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-dark);
}

.lp-stats__label {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #555;
    max-width: 180px;
}

/* ==========================================================================
   Responsivo (base funcional — foco desta rodada é desktop)
   ========================================================================== */

@media (max-width: 900px) {
    .lp-hero {
        min-height: 0;
        /* Chanfro inferior bem mais largo no mobile (mockup: ~35% da viewport) */
        --hero-clip-h: clamp(120px, 35vw, 150px);
        --hero-clip-v: clamp(44px, 12vw, 56px);
        padding-top: clamp(128px, 35vw, 168px);
        /* Respiro entre o meta e o botão de scroll maior (mockup) */
        padding-bottom: calc(var(--hero-clip-v) + clamp(80px, 22vw, 104px));
    }

    /* Crop retrato mobile (393x621): cordista fica no terço direito */
    .lp-hero__bg img {
        object-position: 70% center;
    }

    /* Mockup mobile: véu HORIZONTAL — esquerda navy sólida para leitura,
       direita quase limpa para a foto do cordista aparecer */
    .lp-hero__overlay {
        background:
            linear-gradient(90deg,
                rgba(var(--lp-hero-navy-rgb), 0.96) 0%,
                rgba(var(--lp-hero-navy-rgb), 0.9) 42%,
                rgba(var(--lp-hero-navy-rgb), 0.55) 70%,
                rgba(var(--lp-hero-navy-rgb), 0.16) 100%),
            var(--hero-overlay);
    }

    .lp-hero__text {
        max-width: 100%;
    }

    /* Mockup mobile: título maior, mais arejado e TODO branco */
    .lp-hero__title {
        font-size: clamp(26px, 7.2vw, 32px);
        line-height: 1.3;
    }

    .lp-hero__title span {
        color: inherit;
    }

    .lp-hero__description,
    .lp-hero__area {
        font-size: clamp(13px, 3.75vw, 16px);
        line-height: 1.7;
    }

    /* CTA full width: headset + rótulo à esquerda, seta ancorada na direita */
    .lp-hero__cta-frame,
    .lp-hero__cta-frame .srv-cta__btn {
        width: 100%;
    }

    .lp-hero__cta-frame .srv-cta__btn {
        justify-content: flex-start;
        text-align: left;
        white-space: nowrap;
        gap: clamp(8px, 2.4vw, 12px);
        /* Rótulo longo em 1 linha (nowrap, como no mockup): 12,8px é o teto que
           cabe entre o ícone e a seta a 375px — a 13,5px a seta é empurrada 8px
           para fora do botão. O padding lateral é menor que o dos outros CTAs
           justamente para comprar esses pixels. Se um dia o CTA precisar
           acompanhar os 15px dos demais, terá de virar 2 linhas. */
        font-size: clamp(12.8px, 3.42vw, 14px);
        letter-spacing: -0.01em;
        padding: clamp(15px, 4.3vw, 18px) clamp(12px, 3.2vw, 16px);
    }

    /* Especificidade dupla: vence a regra .srv-cta__btn svg do institucional */
    .lp-hero__cta-frame .lp-hero__cta-icon {
        display: inline-flex;
        width: clamp(18px, 5.3vw, 22px);
        height: clamp(18px, 5.3vw, 22px);
        flex-shrink: 0;
    }

    .lp-hero__cta-frame .srv-cta__btn svg:last-child {
        margin-left: auto;
        flex-shrink: 0;
    }

    .lp-hero__meta {
        max-width: 100%;
        gap: clamp(12px, 3.7vw, 14px);
    }

    .lp-hero__meta-avatar {
        width: 46px;
        height: 46px;
    }

    .lp-hero__meta-avatar img {
        width: 22px;
        height: 22px;
    }

    .lp-hero__meta-text {
        font-size: clamp(11px, 3vw, 12.5px);
    }

    /* Scroll button: centrado, maior (mockup ~42-48px), acima do chanfro */
    .lp-hero__scroll {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: clamp(42px, 11.5vw, 48px);
        height: clamp(42px, 11.5vw, 48px);
        bottom: calc(var(--hero-clip-v) + clamp(8px, 2.2vw, 12px));
    }

    .lp-hero__scroll .hero__scroll-arrow {
        width: 14px;
        height: 8px;
    }

    /* Telas muito estreitas: o rótulo do CTA não fecha em 1 linha — permite
       quebrar mantendo ícone à esquerda e seta ancorada à direita */
    @media (max-width: 360px) {
        .lp-hero__cta-frame .srv-cta__btn {
            white-space: normal;
        }
    }

    /* Mockup mobile: bloco alto no topo para o watermark respirar antes da lista */
    .lp-stats {
        padding-top: clamp(104px, 31vw, 132px);
        padding-bottom: clamp(16px, 5vw, 28px);
    }

    /* Watermark do mockup mobile: asset exportado do Figma (galpão isométrico
       já pré-suavizado, com alpha) — usado como veio, sem crop nem opacity. */
    .lp-stats__watermark {
        top: 0;
        left: 0;
        transform: none;
        width: clamp(200px, 58vw, 260px);
        height: auto;
        aspect-ratio: 210 / 142;
        background: url('../images/lp/watermark-galpao-suave.webp') no-repeat left top / contain;
    }

    /* Indicadores viram LISTA VERTICAL: ícone à esquerda, textos alinhados
       à esquerda, um item por linha com divisor entre eles */
    .lp-stats__grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .lp-stats__item {
        display: grid;
        grid-template-columns: clamp(44px, 12.3vw, 48px) 1fr;
        grid-template-rows: auto auto;
        column-gap: clamp(18px, 5.6vw, 24px);
        align-items: center;
        text-align: left;
        /* Mockup: só uma linha horizontal suave entre os itens. */
        border-top: 1px solid rgba(239, 134, 25, 0.12);
        padding: clamp(24px, 7vw, 30px) 0;
    }


    /* A regra do desktop (.lp-stats__item + .lp-stats__item) tem especificidade
       maior que .lp-stats__item, então precisa ser anulada com o MESMO seletor —
       senão a borda vertical sobrevive e desenha um retângulo em volta da lista. */
    .lp-stats__item + .lp-stats__item {
        border-left: none;
    }
    .lp-stats__item:first-child {
        border-top: none;
    }

    .lp-stats__icon {
        grid-row: 1 / 3;
        margin-bottom: 0;
    }

    /* Ícones e tipografia maiores no mobile (mockup: ícone ~44px, nº ~18px) */
    .lp-stats__icon img {
        width: clamp(40px, 11.7vw, 46px);
        height: clamp(40px, 11.7vw, 46px);
    }

    .lp-stats__number {
        font-size: clamp(16px, 4.8vw, 19px);
    }

    .lp-stats__label {
        font-size: clamp(11px, 3.2vw, 13px);
        color: #444;
        max-width: none;
    }
}