/* ========================================
   PLACEHOLDERS TEMPORÁRIOS
   Use este CSS adicional enquanto não tiver as imagens
   ======================================== */

/* Hero Image Placeholder */
.hero-image-placeholder {
    position: relative;
}

.hero-image-placeholder::before {
    display: none;
}

/* Benefit Images Placeholder */
.benefit-image-placeholder::before {
    content: '📷 benefit-' attr(data-num) '.webp\A400x300px';
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

.benefit-item:nth-child(1) .benefit-image-placeholder::before {
    content: '📷 benefit-1.webp\A"Tocar sem cifra"\A400x300px';
}

.benefit-item:nth-child(2) .benefit-image-placeholder::before {
    content: '👂 benefit-2.webp\A"Ouvido musical"\A400x300px';
}

.benefit-item:nth-child(3) .benefit-image-placeholder::before {
    content: '🎹 benefit-3.webp\A"Qualquer instrumento"\A400x300px';
}

.benefit-item:nth-child(4) .benefit-image-placeholder::before {
    content: '🎵 benefit-4.webp\A"Independência"\A400x300px';
}

.benefit-item:nth-child(5) .benefit-image-placeholder::before {
    content: '🎨 benefit-5.webp\A"Criatividade"\A400x300px';
}

.benefit-item:nth-child(6) .benefit-image-placeholder::before {
    content: '👨‍🏫 benefit-6.webp\A"Ensinar alunos"\A400x300px';
}

/* Target Images Placeholder */
.target-item:nth-child(1) .target-image-placeholder::before {
    content: '🎸 target-1.webp\A"Músico intermediário"\A350x250px';
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

.target-item:nth-child(2) .target-image-placeholder::before {
    content: '🎓 target-2.webp\A"Iniciante"\A350x250px';
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

.target-item:nth-child(3) .target-image-placeholder::before {
    content: '👨‍🏫 target-3.webp\A"Professor"\A350x250px';
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

.target-item:nth-child(4) .target-image-placeholder::before {
    content: '⛪ target-4.webp\A"Música na igreja"\A350x250px';
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

/* Bonus Images Placeholder */
.bonus-item:nth-child(1) .bonus-image-placeholder::before {
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

.bonus-item:nth-child(2) .bonus-image-placeholder::before {
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

/* Device Images Placeholder */
.device-placeholder::before {
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

/* Guarantee Badge Placeholder */
.guarantee-badge::before {
    white-space: pre;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Adicionar posição relativa aos containers */
.hero-image-placeholder,
.benefit-image-placeholder,
.target-image-placeholder,
.bonus-image-placeholder,
.device-placeholder,
.guarantee-badge {
    position: relative;
}

/* ========================================
   REMOVER ESTE ARQUIVO APÓS ADICIONAR AS IMAGENS REAIS
   ======================================== */