/* ============================================================
   mALLin Social — página de produto: fundo escuro, o camaleão em
   degradê atrás e o device de vidro por cima dele. Texto e device
   empilhados no celular; lado a lado a partir de 1024px.
   ============================================================ */

.social__inner {
    display: grid;
    gap: clamp(3rem, 8vw, 5rem);
}

.social__title { margin-top: var(--space-5); }

.social__lead { margin-top: var(--space-6); }

/* ── Os três itens ───────────────────────────────────────── */

.social__list {
    display: grid;
    margin-top: var(--space-8);
    border-top: 1px solid var(--fg-line);
}

.social__item {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--fg-line);
}

.social__item-title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6em;
    font-size: var(--fs-md);
    font-weight: 700;
}

/* A mesma bolinha do rótulo: lê como um status do painel. */
.social__item-title::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot);
    box-shadow: 0 0 10px var(--dot);
}

.social__item-text {
    padding-left: calc(8px + 0.6em);
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--fg-soft);
}

.social__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
    margin-top: var(--space-10);
}

/* ── Palco do device ─────────────────────────────────────── */

.social__stage {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
}

/* Mais alto que o device: sobra camaleão acima e abaixo da moldura, e o
   vidro tem o que desfocar nas bordas. */
.social__cam {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: min(72%, 520px);
    transform: translate(-42%, -50%);
    opacity: 0.9;
}

/* ── Desktop ─────────────────────────────────────────────── */

@media (min-width: 1024px) {
    .social__inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
        column-gap: clamp(3rem, 6vw, 6rem);
    }
}