.method {
    color: #32EFDB;
    background: linear-gradient(90deg, rgba(96, 0, 188, 1) 100%, rgba(48, 0, 94, 0) 100%);
}

.method::after {
    content: "";
    position: absolute;
    left: -8%;
    bottom: -36px;
    width: 49%;
    height: 75px;
    background: #6000bc;
    pointer-events: none;
}

.method .wrap {
    padding-top: 150px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 150px;
}

/* GRELHA PRINCIPAL */
.math {
    display: grid;
    align-items: center;
    gap: 22px;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto auto;
    grid-template-areas: "f1 p1 f2 p2 f3 p3 f4 eq res";
}

/* ÁREAS */
.f1 {
    grid-area: f1
}

.f2 {
    grid-area: f2
}

.f3 {
    grid-area: f3
}

.f4 {
    grid-area: f4
}

.plus-1 {
    grid-area: p1
}

.plus-2 {
    grid-area: p2
}

.plus-3 {
    grid-area: p3
}

.eq {
    grid-area: eq
}

.res {
    grid-area: res
}

/* FEATURE */
.feat {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 10px;
}

.feat .icon {
    display: grid;
    place-items: center;
}

.feat h3 {
    margin: 0;
    color: var(--teal);
    font-weight: 800;
    letter-spacing: .02em;
}

.feat h3 small {
    display: block;
    font-weight: 800;
    font-size: .9em
}

/* OPERADORES */
.op {
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    color: #9feef0;
    display: grid;
    place-items: center;
    min-width: 26px;
}

.eq {
    font-size: 42px;
    color: #b1f9ff
}

/* RESULTADO (selo) */
.result {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
    width: 140px;
}

.result .txt {
    margin: 0;
    color: var(--teal);
    font-weight: 900;
    text-transform: uppercase;
}

/* --------- MOBILE (<768px) --------- */
@media (max-width: 768px) {
    .math {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "f1 f2"
            "f3 f4"
            "eq eq"
            "res res";
        gap: 20px 14px;
        justify-items: center;
    }

    .plus-1, .plus-2, .plus-3, .plus {
        display: none
    }

    .icon img{
        max-height: 99px;
    }

    .feat, .result {
        margin: 0 auto;
        width: 100%;
        max-width: 150px;
    }

    .feat h3 {
        font-size: 18px;
    }
}

.video-placeholder iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Garante que o clique passe para o card */
}

.card:hover .video-placeholder iframe {
    opacity: 1;
}