/* ==========================================================================
   LP Recomendam — "É por isso que / Síndicos e moradores recomendam"

   Réplica do mockup:
   - Fundo da SEÇÃO: branco (o conteúdo da direita é escuro sobre claro).
   - Painel NAVY sangrando pela borda esquerda da tela (~46% da largura),
     funcionando apenas como fundo do mockup de celular.
   - Marca d'água (check) gigante em cinza claríssimo na metade direita.
   ========================================================================== */

.lp-recomendam {
    /* Largura do celular — usada também para posicionar o card claro por cálculo,
       já que ele é um pseudo-elemento da coluna, não do celular. */
    /* +10% de largura sobre a medida original do mockup (18.3vw) */
    --lp-phone-w: clamp(231px, 20.1vw, 319px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--color-white);
    padding: var(--section-pad-xl) 0;
}

/* O painel navy NÃO fica aqui: ele é ancorado à coluna do celular
   (.lp-recomendam__media::before). Assim ele é sempre geometricamente
   preso ao celular e nunca invade a coluna de texto — que era o defeito
   de posicioná-lo por porcentagem da seção inteira. */

/* Marca d'água — glifo da marca Latitud, metade direita */
.lp-recomendam__watermark {
    position: absolute;
    top: 50%;
    right: clamp(-80px, -3vw, -20px);
    transform: translateY(-50%);
    width: clamp(260px, 32vw, 520px);
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.lp-recomendam__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* A coluna da esquerda é bem mais larga que o celular: é ela que define até
       onde o painel navy avança (≈42% da viewport, como no mockup). */
    grid-template-columns: minmax(280px, 45%) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 72px);
    align-items: center;
}

/* ==========================================================================
   Coluna esquerda — mockup de celular
   ========================================================================== */

/* A caixa da mídia tem exatamente a largura do celular, para que o painel navy
   e o card claro possam ser ancorados nela com precisão. */
/* A mídia ocupa a COLUNA inteira (não só o celular): é ela que ancora o painel
   navy, cuja borda direita coincide com o fim da coluna. O celular é centralizado
   dentro dela com a largura de --lp-phone-w. */
.lp-recomendam__media {
    position: relative;
    width: 100%;
}

/* Painel navy — sangra até a borda esquerda da viewport (recortado pelo
   overflow:hidden da seção) e termina bem antes da coluna de texto.
   Deslocado para baixo: o celular "sobe" para fora dele no topo, como no mockup. */
.lp-recomendam__media::before {
    content: '';
    position: absolute;
    left: -100vw;
    right: 0;
    /* O vidro/celular "sobem" bem acima do navy (~6vw), como no mockup */
    top: clamp(64px, 6vw, 112px);
    bottom: calc(-1 * clamp(8px, 0.85vw, 16px));
    /* Cor-base do painel (tom da própria arte). A ARTE fica no ::after, numa
       caixa do tamanho da área visível — lá o `cover` funciona sem distorção. */
    background: #0F1A2C;
    /* Canto SUPERIOR DIREITO chanfrado (corte diagonal) + canto INFERIOR DIREITO
       levemente arredondado. O border-radius molda a caixa e o clip-path corta o
       triângulo do topo: a forma final é a interseção dos dois. */
    border-radius: 0 0 clamp(10px, 0.9vw, 16px) 0;
    clip-path: polygon(
        0 0,
        calc(100% - clamp(52px, 5.4vw, 100px)) 0,
        100% clamp(52px, 5.4vw, 100px),
        100% 100%,
        0 100%
    );
    pointer-events: none;
    z-index: -2;
}

/* Camada da ARTE pré-composta do Figma (prédio já com tratamento azul).
   Caixa de 50vw ancorada à direita do painel — sempre maior que a área
   visível (~45vw), com a sobra caindo fora da tela à esquerda. Numa caixa
   desse tamanho o `cover` cobre altura E largura sem distorção, em qualquer
   viewport — dispensa a calibração manual de piso/teto que falhava por px.
   Mesma geometria de recorte do painel (chanfro + raio inferior direito). */
.lp-recomendam__media::after {
    content: '';
    position: absolute;
    right: 0;
    width: 50vw;
    top: clamp(64px, 6vw, 112px);
    bottom: calc(-1 * clamp(8px, 0.85vw, 16px));
    background: url('../images/lp/recomendam-fachada.webp') center / cover no-repeat;
    border-radius: 0 0 clamp(10px, 0.9vw, 16px) 0;
    clip-path: polygon(
        0 0,
        calc(100% - clamp(52px, 5.4vw, 100px)) 0,
        100% clamp(52px, 5.4vw, 100px),
        100% 100%,
        0 100%
    );
    pointer-events: none;
    z-index: -1;
}

/* ==========================================================================
   Contêiner de vidro translúcido — camada ENTRE o shape navy e o celular.
   Borda fina definindo todo o perímetro + desfoque de fundo (efeito vidro).
   ========================================================================== */

.lp-recomendam__glass {
    /* Tamanho do chanfro — usado no clip-path E no segmento diagonal (::before).
       Uma variável só = os dois sempre se encontram. */
    --glass-chamfer: clamp(30px, 2.4vw, 46px);
    position: relative;
    width: fit-content;
    margin-inline: auto;
    /* Folgas medidas do mockup (assimétricas: muito mais à direita e embaixo) */
    padding:
        clamp(24px, 2.2vw, 42px)
        clamp(64px, 6.2vw, 118px)
        clamp(36px, 3.5vw, 66px)
        clamp(26px, 2.4vw, 46px);
}

/* Camada VISUAL do vidro — elemento próprio, sem backdrop-filter (o combo
   backdrop-filter + mask + clip-path num só elemento quebra a máscara no
   Chromium: o fade não renderiza, e a borda vira "arame" contornando tudo). */
.lp-recomendam__glass-frame {
    position: absolute;
    inset: 0;
    /* 1ª camada: brilho esbranquiçado no topo (reflexo de luz no vidro).
       2ª camada: preenchimento sutilmente azulado. */
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.20) 0%,
            rgba(255, 255, 255, 0.05) 12%,
            transparent 24%),
        linear-gradient(0deg, rgba(140, 175, 220, 0.10), rgba(140, 175, 220, 0.10));
    border: 1px solid rgba(187, 211, 238, 0.9);
    border-radius: 0 clamp(22px, 2vw, 32px) clamp(22px, 2vw, 32px) clamp(22px, 2vw, 32px);
    /* Canto superior esquerdo chanfrado NO PRÓPRIO contorno: o clip corta o
       elemento (e a borda junto) exatamente em (0,C) e (C,0). */
    clip-path: polygon(
        0 var(--glass-chamfer),
        var(--glass-chamfer) 0,
        100% 0,
        100% 100%,
        0 100%
    );
    /* FADE-OUT esquerda -> direita: desvanece fill, brilho, bordas e o
       segmento diagonal — demarcado na esquerda/chanfro, sumindo por completo
       ao passar pelo celular. */
    mask-image: linear-gradient(90deg,
        #000 0%,
        #000 22%,
        rgba(0, 0, 0, 0.45) 55%,
        transparent 85%);
    -webkit-mask-image: linear-gradient(90deg,
        #000 0%,
        #000 22%,
        rgba(0, 0, 0, 0.45) 55%,
        transparent 85%);
    pointer-events: none;
}

/* Segmento diagonal da borda no chanfro — desenha o trecho de contorno que o
   clip-path removeu, de (0,C) a (C,0). Comprimento = C·√2, rotacionado -45°. */
.lp-recomendam__glass-frame::before {
    content: '';
    position: absolute;
    top: var(--glass-chamfer);
    left: 0;
    width: calc(var(--glass-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;
}

/* Proporção de celular moderno (9/19.5) e moldura AZUL, como no mockup —
   não a moldura escura translúcida que estava aqui. */
/* Largura DEFINIDA (não 100%): o contêiner de vidro usa width:fit-content,
   então o celular precisa ter medida própria — senão os dois colapsam. */
.lp-recomendam__phone {
    position: relative;
    isolation: isolate;
    width: var(--lp-phone-w);
    max-width: 100%;
    aspect-ratio: 9 / 19.5;
    margin-inline: auto;
    overflow: hidden;
    border: clamp(4.8px, 0.44vw, 8px) solid #1F3A5F;
    border-radius: clamp(28px, 2.6vw, 40px);
    background: var(--color-dark);
    /* Borda dupla: anel externo com a MESMA espessura do bezel interno —
       moldura em dois tons de azul, aço claro por fora, navy por dentro. */
    box-shadow:
        0 0 0 clamp(4.8px, 0.44vw, 8px) #3D5F8A,
        0 clamp(18px, 1.8vw, 32px) clamp(32px, 3.2vw, 56px) rgba(0, 0, 0, 0.45);
}


/* Vídeo do Vimeo preenchendo a tela do celular. O overflow:hidden + raio do
   .lp-recomendam__phone recortam o iframe nos cantos arredondados. */
.lp-recomendam__phone-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.lp-recomendam__phone img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Escurecimento sutil — só o necessário para o texto "VOCÊ JÁ PERCEBEU" ter
   contraste no topo. A foto precisa ficar clara e nítida, como no mockup. */
.lp-recomendam__phone-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(19, 23, 26, 0.34) 0%,
        rgba(19, 23, 26, 0.12) 34%,
        rgba(19, 23, 26, 0) 55%,
        rgba(19, 23, 26, 0.22) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Terço superior da tela (sobre o prédio), como no mockup — centro do bloco
   de texto a 28% da altura do celular. */
.lp-recomendam__phone-caption {
    position: absolute;
    /* Terço inferior da tela, como legenda queimada de vídeo */
    bottom: 22%;
    left: clamp(16px, 1.25vw, 24px);
    right: clamp(16px, 1.25vw, 24px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: clamp(14px, 1.05vw, 19px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-align: center;
    /* Legenda de vídeo: branca e em caixa baixa, como no Figma. */
    color: var(--color-white);
    /* Sombra MARCADA (não glow difuso): camada curta e escura cola atrás das
       letras p/ legibilidade sobre céu/prédio claros + halo suave de apoio. */
    text-shadow:
        0 2px 3px rgba(10, 15, 21, 0.65),
        0 6px 16px rgba(10, 15, 21, 0.40);
}

.lp-recomendam__phone-caption-line {
    display: block;
}

/* ==========================================================================
   Coluna direita — conteúdo sobre fundo branco
   ========================================================================== */

.lp-recomendam__content {
    max-width: min(100%, clamp(360px, 52vw, 700px));
}

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

.lp-recomendam__title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-section-lg);
    line-height: 1.2;
    color: #212121;
    margin-bottom: clamp(20px, 1.5vw, 28px);
}

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

/* Itens com ícone — mesmo padrão de metodo-lideranca / lp-intro */
.lp-recomendam__items {
    list-style: none;
    margin: 0 0 clamp(24px, 1.8vw, 32px);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-card);
}

.lp-recomendam__item {
    display: grid;
    grid-template-columns: var(--btn-size) 1fr;
    gap: var(--gap-content);
}

.lp-recomendam__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-size);
    height: var(--btn-size);
    /* Figma: o ícone aparece SOZINHO — sem caixa branca, sem borda e sem o
       filete azul vertical que existia aqui. */
    background: transparent;
    border: none;
    /* Azul vibrante — mesmo tom dos ícones do institucional (sobre-equipe). */
    color: #155EEF;
    flex-shrink: 0;
}

.lp-recomendam__item-icon svg {
    width: clamp(20px, 1.25vw, 24px);
    height: clamp(20px, 1.25vw, 24px);
}

.lp-recomendam__item-body {
    min-width: 0;
}

.lp-recomendam__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-recomendam__item-desc {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body-sm);
    line-height: 1.7;
    color: #555;
}

/* ==========================================================================
   Card de depoimento
   ========================================================================== */

/* Cantos arredondados generosos, EXCETO o inferior direito, chanfrado.
   O clip corta a borda na diagonal; o ::after desenha o segmento que falta
   (mesma técnica do vidro — variável única garante o encontro). */
.lp-recomendam__quote {
    --quote-chamfer: clamp(24px, 2vw, 36px);
    position: relative;
    margin: 0 0 clamp(24px, 1.8vw, 32px);
    padding: clamp(20px, 1.7vw, 32px);
    background: var(--color-white);
    border: 1px solid #E5E7EB;
    border-radius: clamp(16px, 1.4vw, 24px) clamp(16px, 1.4vw, 24px) 0 clamp(16px, 1.4vw, 24px);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--quote-chamfer)),
        calc(100% - var(--quote-chamfer)) 100%,
        0 100%
    );
}

/* Segmento diagonal da borda no chanfro — de (100%-C, 100%) a (100%, 100%-C).
   Anchor no vértice direito, rotação 135° desce em direção ao vértice de baixo;
   a espessura da linha cai para DENTRO do polígono (não é clipada). */
.lp-recomendam__quote::after {
    content: '';
    position: absolute;
    left: 100%;
    top: calc(100% - var(--quote-chamfer));
    width: calc(var(--quote-chamfer) * 1.41422);
    height: 0;
    border-top: 1px solid #E5E7EB;
    transform: rotate(135deg);
    transform-origin: 0 0;
    pointer-events: none;
}

/* Aspas gigantes como marca d'água, passando por trás da 1ª linha do texto. */
.lp-recomendam__quote-mark {
    position: absolute;
    top: clamp(10px, 0.9vw, 16px);
    left: clamp(12px, 1.1vw, 20px);
    width: clamp(52px, 4.8vw, 76px);
    height: auto;
    color: #EFF2F6;
    z-index: 0;
    pointer-events: none;
}

.lp-recomendam__quote-text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: #454545;
}

.lp-recomendam__quote-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-content);
    margin-top: clamp(14px, 1.15vw, 20px);
}

.lp-recomendam__quote-author {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2px, 0.21vw, 4px);
}

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

.lp-recomendam__quote-role {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: var(--fs-caption);
    line-height: 1.4;
    color: #666;
}

/* Dots de carrossel (decorativos) */
.lp-recomendam__dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding-bottom: 2px;
}

.lp-recomendam__dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E4E7EC;
}

.lp-recomendam__dot--active {
    width: 26px;
    height: 7px;
    border-radius: 4px;
    background: var(--color-bg-navy);
}

/* ==========================================================================
   CTA — reaproveita .srv-cta__btn (servico-cta.css)
   ========================================================================== */

.lp-recomendam__cta {
    display: flex;
}

/* Moldura do botão: geometria vem de .srv-cta__action (servico-cta.css).
   Só a cor do anel muda — o padrão usa branco translúcido, invisível sobre o
   fundo branco desta coluna. */
.lp-recomendam__cta-frame {
    display: inline-flex;
}

.lp-recomendam__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%);
}

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

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

    /* Glifo acompanha a pastilha de 44px — mesmo 24px que a lp-intro usa, para
       as duas seções não exibirem pastilhas iguais com ícones de tamanhos
       diferentes na mesma página. */
    .lp-recomendam__item-icon svg {
        width: 24px;
        height: 24px;
    }

    /* Sombra do card: drop-shadow e não box-shadow, porque o card tem clip-path
       (o box-shadow seria recortado no canto chanfrado). Mesmo peso do card
       irmão em lp-depoimento. */
    .lp-recomendam__quote {
        filter: drop-shadow(0 10px 20px rgba(19, 23, 26, 0.10));
    }

    /* Aspas = marca d'água ATRÁS do texto (absolute, fora do fluxo: o texto
       passa por cima), semiopacas. Não devem empurrar as linhas. */
    .lp-recomendam__quote-mark {
        opacity: 0.55;
    }

    /* Painel de fundo = asset do Figma (786x1246, com alpha). A FORMA já vem
       recortada no arquivo — chanfro no topo esquerdo e curva no topo direito —
       então aqui não há clip-path nem border-radius a calcular. O ::before some;
       uma camada só basta. */
    .lp-recomendam__media::before {
        display: none;
    }

    .lp-recomendam__media::after {
        /* Sangra até as bordas da viewport: a mídia vive dentro do .container,
           então estende-se pelo padding dele nos dois lados. */
        left: calc(-1 * var(--container-padding));
        right: calc(-1 * var(--container-padding));
        width: auto;
        /* começa mais abaixo — é o quanto do celular fica para fora no topo */
        top: clamp(70px, 24vw, 100px);
        bottom: 0;
        background: url('../images/lp/recomendam-painel-mobile.webp') top center / 100% 100% no-repeat;
        border-radius: 0;
        clip-path: none;
    }

    .lp-recomendam__glass {
        --glass-chamfer: clamp(22px, 6vw, 32px);
        /* O vidro é bem maior que o celular: sobra acima e à esquerda (à direita
           o fade o dissolve). Mais padding à esquerda que à direita empurra o
           celular levemente para a direita do centro, como no mockup. */
        padding: clamp(26px, 9vw, 36px) clamp(16px, 5vw, 26px) clamp(22px, 6vw, 30px) clamp(24px, 8vw, 34px);
    }

    .lp-recomendam__watermark {
        width: 300px;
        right: -90px;
    }

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

    .lp-recomendam__media {
        /* Mockup mobile: o celular vem DEPOIS do conteúdo. O painel é desenhado
           pelos pseudo-elementos, não pelo fundo desta caixa — assim o celular
           pode transbordar a borda superior dele. */
        order: 2;
        /* O painel vai até a base desta caixa; este padding é o respiro entre
           a base do VIDRO e o fim do azul (o do celular soma o do vidro). */
        padding-bottom: clamp(24px, 7vw, 34px);
    }

    /* Bezel: exatamente o mesmo do desktop (navy + anel externo). Só a
       largura muda no mobile. */
    .lp-recomendam__phone {
        width: min(265px, 70vw);
    }

    /* Legenda de vídeo: branca, caixa baixa, terço inferior, com sombra para
       ficar legível sobre a camisa branca. */
    .lp-recomendam__phone-caption {
        top: auto;
        bottom: 22%;
        transform: none;
        font-family: var(--font-text);
        font-weight: 400;
        font-size: clamp(13px, 3.8vw, 16px);
        line-height: 1.3;
        text-transform: none;
        color: #FFF;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 10px rgba(0, 0, 0, 0.35);
    }

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

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

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

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