/* ==========================================================================
   Platform — Experiência TWED + Stats + CTA
   ========================================================================== */

/* ===== Parte superior (fundo branco/bege) ===== */

.platform__top {
    position: relative;
    background-color: var(--color-bg);
    background-image: radial-gradient(circle, #e4ebc3 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    padding: var(--space-section) 0 0;
    padding-bottom: 200px;
    overflow: visible;
}

.platform__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 1216px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Badge */
.platform__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background-color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 500;
    color: #252B37;
    margin: 0 auto;
}

.platform__badge img {
    width: 16px;
    height: 16px;
}

/* Título */
.platform__title {
    font-family: var(--font-heading);
    font-weight: var(--section-title-weight);
    font-size: var(--section-title-size);
    line-height: var(--section-title-lh);
    letter-spacing: var(--section-title-ls);
    color: var(--color-text-body);
    text-align: center;
    max-width: 562px;
}

/* Descrição */
.platform__desc {
    font-size: var(--section-desc-size);
    line-height: var(--section-desc-lh);
    letter-spacing: var(--section-desc-ls);
    color: var(--color-text-muted);
    text-align: center;
    max-width: 760px;
}

.platform__desc strong {
    color: var(--color-text-body);
    font-weight: 600;
}

/* ===== Cards em triângulo ===== */

.platform__cards {
    position: relative;
    max-width: 1360px;
    margin: 0 auto;
    padding: var(--space-gap-xl) 24px 24px;
}

/* Card topo centro */
.platform__card--top {
    margin: 0 auto clamp(24px, calc(5.71px + 1.79vw), 40px);
    max-width: 470px;
}

/* Cards inferiores */
.platform__cards-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

/* Card individual */
.platform__card {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: clamp(20px, calc(15.43px + 0.45vw), 24px) 16px;
    gap: 12px;
    background-color: var(--color-white);
    border: 1px solid #F5F5F5;
    box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03), 0px 2px 2px -1px rgba(10, 13, 18, 0.04);
    border-radius: 12px;
    isolation: isolate;
    max-width: 470px;
    width: 100%;
}

.platform__card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.platform__card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.platform__card-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    color: var(--color-dark);
}

.platform__card-desc {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: -0.01em;
    color: #717680;
}

/* ===== Parte inferior (fundo verde) ===== */

.platform__bottom {
    background-color: #aeca37;
    background-image: radial-gradient(circle, #bbdd25 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    padding: clamp(220px, 20vw, 380px) 0 var(--space-section);
    text-align: center;
}

/* Laptop mockup */
.platform__laptop {
    position: absolute;
    bottom: clamp(-350px, -18vw, -200px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 100%;
    max-width: 1100px;
}

.platform__laptop img {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
}

/* Play button */
.platform__play {
    position: absolute;
    bottom: 28%;
    left: calc(50% - 5px);
    transform: translateX(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition-fast);
}

.platform__play:hover {
    transform: translateX(-50%) scale(1.1);
}

/* Video text */
.platform__video-text {
    font-size: 15px;
    line-height: 1.6;
    color: #20273F;
    margin-top: 12px;
}

/* ===== Separador com seta ===== */

.platform__divider {
    position: relative;
    width: 100%;
    max-width: var(--container-width);
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform__divider::before {
    content: '';
    position: absolute;
    left: 37.5%;
    right: 37.5%;
    top: 50%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.05) 80%, transparent);
}

.platform__scroll {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid #E9EAEB;
    color: #363f72;
    flex-shrink: 0;
    transition: background-color var(--transition-fast);
}

.platform__scroll:hover {
    background-color: #F5F5F5;
}

.platform__scroll-arrow {
    animation: scrollPulse 2s ease-in-out infinite;
}

.platform__scroll-arrow--bottom {
    animation-delay: 0.3s;
}

/* ===== Stats + CTA block ===== */

.platform__cta-block {
    max-width: 803px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.platform__cta-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(30px, calc(18.57px + 1.12vw), 40px);
    line-height: 1.25;
    text-align: center;
    letter-spacing: -1.5px;
    color: #252B37;
    align-self: stretch;
}

/* Quote */
.platform__quote {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 549px;
}

.platform__quote p {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--font-subtitle-size);
    font-style: normal;
    line-height: 1.7;
    text-align: center;
    letter-spacing: -0.01em;
    color: #414651;
}

.platform__quote cite {
    display: block;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    line-height: 18px;
    color: #414651;
}

/* Stats grid */
.platform__stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, calc(7.43px + 0.45vw), 16px);
    max-width: 803px;
    margin: var(--space-gap-xl) auto 0;
}

.platform__stats-row {
    display: flex;
    justify-content: center;
    gap: clamp(24px, calc(5.71px + 1.79vw), 40px);
}

.platform__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 120px;
}

.platform__stat-number {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: var(--section-title-size);
    line-height: 39px;
    letter-spacing: -1.5px;
    color: #252B37;
}

.platform__stat-label {
    font-size: 16px;
    line-height: 1.25;
    text-align: center;
    color: #414651;
}

/* CTA */
.platform__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 28px;
    background-color: var(--color-button);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    margin-top: var(--space-gap-xl);
}

.platform__cta:hover {
    background-color: #0f1d36;
}

.platform__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--color-white);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--color-dark);
}

.platform__cta-icon svg {
    width: 18px;
    height: 18px;
}

/* ===== Mobile ===== */

@media (max-width: 768px) {
    .platform__top {
        padding: 40px 0 0;
    }

    .platform__title br {
        display: none;
    }

    /* O laptop é absoluto (não ocupa espaço no fluxo) e sua metade superior
       sobe ~37.5vw (0.6 × 62.5vw) acima da divisa. Reservamos esse espaço no
       fim dos cards + respiro, senão o último card fica por cima do laptop. */
    .platform__cards {
        padding: 28px 0 calc(37.5vw + 24px);
    }

    .platform__card--top {
        max-width: 100%;
    }

    .platform__cards-bottom {
        flex-direction: column;
        align-items: center;
    }

    .platform__card {
        max-width: 100%;
    }

    .platform__play {
        width: 64px;
        height: 64px;
        /* Ajuste fino para centralizar o play sobre a tela do laptop em mobile:
           bottom 25% + translateX(-40%) (empurra ~6px à direita do ponto de
           ancoragem, alinhando ao centro óptico da tela). */
        bottom: 25%;
        transform: translateX(-40%);
    }

    /* Mantém o mesmo translateX no hover para o botão não "pular" ao tocar. */
    .platform__play:hover {
        transform: translateX(-40%) scale(1.1);
    }

    /* O ícone do play é um <img> (não <svg>), então precisa ser alvo direto;
       caso contrário ele mantém os 120px nativos, estoura o botão de 64px a
       partir do canto superior esquerdo e aparece deslocado para baixo/direita
       em vez de centralizado na tela do laptop. */
    .platform__play img {
        width: 100%;
        height: 100%;
    }

    .platform__cta-title {
        font-size: clamp(18px, 4.5vw, 24px);
    }

    .platform__cta-title br {
        display: none;
    }

    .platform__stats-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .platform__divider::before {
        left: 24px;
        right: 24px;
    }

    /* Posiciona o laptop um pouco mais alto: translateY(40%) empurra para
       baixo só 40% da própria altura (em vez de 50%), deixando a divisa
       branco/verde a ~60% da altura do laptop — mais do mockup sobre o
       branco e menos avançando no verde. */
    .platform__laptop {
        bottom: 0;
        transform: translate(-50%, 40%);
    }

    /* Avanço do laptop sobre o verde = 40% da altura = 0.4 × 62.5vw = 25vw
       (ele tem 100vw de largura e proporção 800x500). Reservamos esse
       espaço + respiro para o conteúdo não sobrepor o mockup. */
    .platform__bottom {
        padding: calc(25vw + 24px) 0 48px;
    }
}