/* ==========================================================================
   LP Intro — "Com o Grupo Latitud / Sua fachada é revitalizada"
   Fundo branco + marca d'água de desenho técnico (padrão institucional),
   2 colunas (texto ~58% / foto ~35%) e bloco final centralizado.
   A moldura da foto reaproveita a técnica frame+mask de .metodo-lideranca.
   ========================================================================== */

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

/* Blueprint do edifício (asset do Figma) — canto INFERIOR DIREITO da seção,
   abaixo da foto da liderança. Nunca atrás do bloco de texto, à esquerda.
   A arte já vem no tom claríssimo final: sem opacity adicional. */
.lp-intro__watermark {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(172px, 16.5vw, 286px);
    aspect-ratio: 389 / 400;
    background: url('../images/lp/intro-blueprint.webp') no-repeat bottom right / contain;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

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

/* Colunas
   ========================================================================== */

.lp-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 35fr);
    gap: clamp(32px, 3.1vw, 60px);
    align-items: start;
}

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

/* Label + linha laranja
   ========================================================================== */

.lp-intro__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-intro__line {
    width: var(--line-width);
    height: 0;
    border-top: 1px solid var(--color-primary);
    flex-shrink: 0;
}

/* Título e parágrafos
   ========================================================================== */

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

.lp-intro__description {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #454545;
    margin-bottom: clamp(12px, 0.9vw, 16px);
}

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

/* Itens com ícone (padrão institucional)
   ========================================================================== */

.lp-intro__items {
    list-style: none;
    margin: clamp(24px, 1.8vw, 34px) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-card);
}

.lp-intro__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--btn-size) 1fr;
    gap: var(--gap-content);
    padding-left: 0;
}

/* Pastilha do ícone — mesmo par fundo/borda dos cards de método (#EEF3FF +
   hairline azul), que é o padrão do mockup para ícones sobre fundo branco. */
.lp-intro__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: clamp(8px, 0.52vw, 10px);
    background: #EEF3FF;
    border: 1px solid rgba(21, 94, 239, 0.22);
    flex-shrink: 0;
}

/* Ícones oficiais do Figma (24x24 nativos — exibidos no tamanho natural para
   não interpolar).
   TODO: pedir ao designer o export em SVG (ou 2x) para ficarem nítidos em
   telas de alta densidade. */
.lp-intro__item-icon img {
    display: block;
    width: 24px;
    height: 24px;
}

.lp-intro__item-text {
    min-width: 0;
}

.lp-intro__item-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-label);
    line-height: 1.3;
    color: #212121;
    margin-bottom: clamp(4px, 0.31vw, 6px);
}

.lp-intro__item-desc {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body-sm);
    line-height: 1.7;
    color: #555;
}

/* Foto da liderança + contorno
   ========================================================================== */

/* A caixa é o CONTORNO; a foto vive dentro, deslocada para a direita, deixando
   o traço aparecer à esquerda, acima e abaixo (como no Figma). */
.lp-intro__media {
    --intro-chamfer: clamp(38px, 4.4vw, 62px);
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: clamp(300px, 34vw, 470px);
    margin: 0 auto;
    padding:
        clamp(16px, 1.8vw, 26px)
        0
        clamp(22px, 2.4vw, 36px)
        clamp(14px, 1.5vw, 22px);
}

/* Traço fino com o mesmo chanfro do arquivo da foto (canto inferior esquerdo).
   O clip corta a borda na diagonal; o ::after redesenha o segmento que falta. */
.lp-intro__media::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(187, 211, 238, 0.9);
    border-radius: clamp(14px, 1.4vw, 20px);
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        var(--intro-chamfer) 100%,
        0 calc(100% - var(--intro-chamfer))
    );
    pointer-events: none;
    z-index: 0;
}

/* Segmento diagonal do chanfro — cateto · √2, a -45° a partir do vértice. */
.lp-intro__media::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--intro-chamfer);
    width: calc(var(--intro-chamfer) * 1.41422);
    height: 0;
    border-top: 1px solid rgba(187, 211, 238, 0.9);
    transform: rotate(45deg);
    transform-origin: 0 100%;
    pointer-events: none;
    z-index: 0;
}

/* O chanfro do canto inferior esquerdo JÁ VEM recortado no arquivo (alpha),
   então aqui não há mask nem clip a calcular. */
.lp-intro__media img {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}
/* Bloco final centralizado (largura total)
   ========================================================================== */

.lp-intro__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: clamp(32px, 2.6vw, 48px);
}

.lp-intro__note {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body-sm);
    line-height: 1.7;
    color: #454545;
    max-width: 620px;
    margin: 0 0 clamp(20px, 1.6vw, 28px);
    text-wrap: pretty;
}

.lp-intro__note strong {
    font-weight: 600;
    color: #212121;
}

.lp-intro__cta {
    align-self: center;
}

/* Responsivo (desktop-first — mobile apenas funcional)
   ========================================================================== */

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

    .lp-intro__grid {
        grid-template-columns: 1fr;
        gap: clamp(28px, 2.5vw, 40px);
    }

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

    .lp-intro__media {
        display: none;
    }

    .lp-intro__watermark {
        width: clamp(157px, 43vw, 215px);
    }
}

@media (max-width: 480px) {
    .lp-intro__cta {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}