/* =========================
   RESPONSIVE - MOBILE CAROUSEL PREMIUM
========================= */

@media (max-width: 900px) {


    .stack {
        padding: 110px 0 150px;
        position: relative;
        overflow: hidden;
    }

    .stack-header {
        margin-bottom: 60px;
        padding: 0 20px;
    }

    .stack-structure::before {
        display: none;
    }

    /* =========================
       CARROSSEL
    ========================= */

    .stack-structure {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 0 20px;

        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .stack-structure::-webkit-scrollbar {
        display: none;
    }

    .stack-layer.featured {
        transform: scale(0.88);
        box-shadow: none;
    }

    /* =========================
       CARDS PADRONIZADOS
    ========================= */

    .stack-layer,
    .stack-layer:nth-child(odd),
    .stack-layer:nth-child(even) {
        flex: 0 0 80%;
        width: 80%;
        height: 500px;              /* altura fixa padronizada */
        scroll-snap-align: center;
        align-self: center;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        transition:
            transform 0.4s ease,
            opacity 0.3s ease,
            box-shadow 0.3s ease;

        overflow: hidden;           /* impede qualquer vazamento */
        padding: 28px;              /* controle interno consistente */
        box-sizing: border-box;
    }

    /* Estado lateral */
    .stack-layer {
        transform: scale(0.88);
        opacity: 0.55;
    }

    /* Estado ativo central */
    .stack-layer.active {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    }

    /* =========================
       TIPOGRAFIA AJUSTADA
    ========================= */

    .stack-layer h4 {
        margin-top: 25px;
        font-size: 18px;        /* levemente reduzido */
        line-height: 1.25;
        margin-bottom: 14px;
        text-align: center;
        white-space: normal;    /* permite quebra */
    }

    .stack-layer p {
        font-size: 14px;        /* levemente reduzido */
        line-height: 1.55;
        margin-bottom: 16px;
    }

    .stack-layer ul {
        margin-top: 20px;       /* empurra lista para baixo */
    }

    .stack-layer li {
        font-size: 13.5px;      /* reduzido para caber melhor */
        line-height: 1.5;
        margin-bottom: 6px;
    }

    /* =========================
       DOTS
    ========================= */

    .stack-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-top: 50px;
    }

    .stack-dots span {
        width: 20px;
        height: 6px;
        border-radius: 20px;
        background: rgba(255,255,255,0.08);
        position: relative;
        overflow: hidden;
        transition: all 0.35s ease;
    }

    .stack-dots span::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            rgba(0,140,255,0.3),
            rgba(0,140,255,0.1)
        );
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .stack-dots span.active {
        width: 48px;
        height: 8px;
        background: linear-gradient(
            90deg,
            #007BFF,
            var(--blue-accent)
        );
        box-shadow:
            0 0 12px rgba(0,140,255,0.8),
            0 0 30px rgba(0,140,255,0.4);
        transform: scale(1.05);
    }

    .stack-dots span.active::before {
        opacity: 1;
    }



    
}