/* ========== GRANDÃO BISTECA – Scroll sticky + composição centralizada ========== */
.GrandaoBisteca * {
    box-sizing: border-box;
}

.GrandaoBisteca {
    min-height: 500vh;
    background-color: #0a0a0a00;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    position: relative;
}

.GrandaoBisteca-sticky-wrap {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.GrandaoBisteca-progress {
    flex-shrink: 0;
    z-index: 12;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    width: 100%;
}

.GrandaoBisteca-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 200, 80, 0.95), rgba(34, 197, 94, 0.85));
    border-radius: 0 3px 3px 0;
    transition: width 0.12s ease;
}

.GrandaoBisteca-titulo {
    flex-shrink: 0;
    z-index: 10;
    margin: 0;
    padding: 1.25rem 1rem 0.4rem;
    font-size: clamp(1.4rem, 3.2vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    text-align: center;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
    background: linear-gradient(180deg, #0a0a0a 0%, transparent 85%);
}

.GrandaoBisteca-subtitulo {
    flex-shrink: 0;
    z-index: 10;
    margin: 0;
    padding: 0 1rem 0.8rem;
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

/* ========== Área central única ========== */
.GrandaoBisteca-central {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 0 1rem;
}

.slide-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-item {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.94) translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    contain: layout style paint;
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"],
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"],
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"],
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"],
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    z-index: 1;
}

.slide-nome {
    margin: 0 0 0;
    transform: translateY(30px);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.98);
    text-align: center;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.02em;
}

/* ========== Composição: burger central + ingredientes ao redor ========== */
.composicao {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0;
    contain: layout style;
}

.slide-img-wrap {
    position: relative;
    z-index: 2;
    height: clamp(260px, 55vw, 380px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-img-wrap img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.ingrediente-svg {
    position: absolute;
    z-index: 1;
    width: clamp(36px, 8vw, 52px);
    height: clamp(36px, 8vw, 52px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.ingrediente-svg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1) sepia(0.5) saturate(2) hue-rotate(8deg) brightness(1.15);
    #box-shadow: 0 4px 12px rgba(255, 180, 50, 0.35);
    transition: filter 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.ingrediente-svg:hover img {
    filter: invert(1) sepia(0.6) saturate(2.2) hue-rotate(8deg) brightness(1.25);
    box-shadow: 0 6px 16px rgba(255, 180, 50, 0.5);
    transform: scale(1.1);
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente-svg,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente-svg,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente-svg,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente-svg,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente-svg {
    opacity: 1;
    animation: ingredienteFlutua 3s ease-in-out infinite;
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente--top,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente--top,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente--top,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente--top,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente--top {
    animation: ingredienteEntraTop 0.45s ease forwards, ingredienteFlutua 4s ease-in-out 0.5s infinite;
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente--right,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente--right,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente--right,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente--right,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente--right {
    animation: ingredienteEntraRight 0.45s 0.06s ease forwards, ingredienteFlutuaRight 4s ease-in-out 0.56s infinite;
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente--bottom,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente--bottom,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente--bottom,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente--bottom,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente--bottom {
    animation: ingredienteEntraBottom 0.45s 0.12s ease forwards, ingredienteFlutuaBottom 4s ease-in-out 0.62s infinite;
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente--left,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente--left,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente--left,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente--left,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente--left {
    animation: ingredienteEntraLeft 0.45s 0.18s ease forwards, ingredienteFlutuaLeft 4s ease-in-out 0.68s infinite;
}

.ingrediente--top {
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0);
}

.ingrediente--right {
    top: 50%;
    right: 2%;
    transform: translate(0, -50%);
}

.ingrediente--bottom {
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 0);
}

.ingrediente--left {
    top: 50%;
    left: 2%;
    transform: translate(0, -50%);
}

/* Flutuação leve – só transform (GPU) para performance */
@keyframes ingredienteFlutua {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -6px); }
}
@keyframes ingredienteFlutuaRight {
    0%, 100% { transform: translate(0, -50%); }
    50% { transform: translate(6px, -50%); }
}
@keyframes ingredienteFlutuaBottom {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
}
@keyframes ingredienteFlutuaLeft {
    0%, 100% { transform: translate(0, -50%); }
    50% { transform: translate(-6px, -50%); }
}

@keyframes ingredienteEntraTop {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente--right,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente--right,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente--right,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente--right,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente--right {
    animation-name: ingredienteEntraRight;
}

@keyframes ingredienteEntraRight {
    from {
        opacity: 0;
        transform: translate(20px, -50%) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%) scale(1);
    }
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente--bottom,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente--bottom,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente--bottom,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente--bottom,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente--bottom {
    animation-name: ingredienteEntraBottom;
}

@keyframes ingredienteEntraBottom {
    from {
        opacity: 0;
        transform: translate(-50%, 20px) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

.GrandaoBisteca.slide-0 .slide-item[data-slide="0"] .ingrediente--left,
.GrandaoBisteca.slide-1 .slide-item[data-slide="1"] .ingrediente--left,
.GrandaoBisteca.slide-2 .slide-item[data-slide="2"] .ingrediente--left,
.GrandaoBisteca.slide-3 .slide-item[data-slide="3"] .ingrediente--left,
.GrandaoBisteca.slide-4 .slide-item[data-slide="4"] .ingrediente--left {
    animation-name: ingredienteEntraLeft;
}

@keyframes ingredienteEntraLeft {
    from {
        opacity: 0;
        transform: translate(-20px, -50%) scale(0.6);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%) scale(1);
    }
}

/* ========== Lista de ingredientes sutil ========== */
.lista-ingredientes-sutil {
    margin: 0.6rem 0 0;
    padding: 0 0.75rem;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    letter-spacing: 0.02em;
    max-width: 90%;
    opacity: 0;
    z-index: 99999;
    transform: translateY(8px);
    transition: opacity 0.45s ease 0.15s, transform 0.45s ease 0.15s, color 0.3s ease;
}

.GrandaoBisteca.slide-0 .lista-ingredientes-sutil[data-text="0"],
.GrandaoBisteca.slide-1 .lista-ingredientes-sutil[data-text="1"],
.GrandaoBisteca.slide-2 .lista-ingredientes-sutil[data-text="2"],
.GrandaoBisteca.slide-3 .lista-ingredientes-sutil[data-text="3"],
.GrandaoBisteca.slide-4 .lista-ingredientes-sutil[data-text="4"] {
    opacity: 1;
    transform: translateY(-50px);
    color: rgba(255, 255, 255, 0.55);
}

/* ========== Indicadores ========== */
.slide-indicadores {
    display: flex;
    gap: 0.5rem;
    padding: 0.9rem;
    z-index: 5;
    flex-shrink: 0;
}

.slide-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.GrandaoBisteca.slide-0 .slide-dot[data-dot="0"],
.GrandaoBisteca.slide-1 .slide-dot[data-dot="1"],
.GrandaoBisteca.slide-2 .slide-dot[data-dot="2"],
.GrandaoBisteca.slide-3 .slide-dot[data-dot="3"],
.GrandaoBisteca.slide-4 .slide-dot[data-dot="4"] {
    background: rgba(255, 200, 80, 0.95);
    transform: scale(1.35);
    box-shadow: 0 0 18px rgba(255, 180, 50, 0.5);
}

/* ========== Comentários emojis ========== */
.ComentariosFofos {
    width: 100%;
    padding: 0.6rem;
    background: linear-gradient(0deg, rgb(255, 154, 13) 0%, transparent 100%);
    z-index: 5;
    flex-shrink: 0;
    border-bottom-left-radius: 30px;
    
    border-bottom-right-radius: 30px;
}

.comentario1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 0.4rem;
}

.comentario1 img {
    height: 104px;
    width: auto;
    animation: emojiPulando 1.2s ease-in-out infinite;
}

.comentario1 img:nth-child(1) { animation-delay: 0s; }
.comentario1 img:nth-child(2) { animation-delay: 0.15s; }
.comentario1 img:nth-child(3) { animation-delay: 0.3s; }
.comentario1 img:nth-child(4) { animation-delay: 0.45s; }
.comentario1 img:nth-child(5) { animation-delay: 0.6s; }

@keyframes emojiPulando {
    0%, 100% { transform: translateY(0) scale(1.3); }
    50% { transform: translateY(-8px) scale(1.68); }
}

@media (max-width: 900px) {
    .composicao {
        max-width: 340px;
    }

    .slide-img-wrap {
        height: clamp(220px, 50vw, 300px);
    }

    .ingrediente-svg {
        width: clamp(32px, 7vw, 44px);
        height: clamp(32px, 7vw, 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide-item,
    .ingrediente-svg,
    .ingrediente-svg img {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

.escondido {
    display: none;
}