<!-- Incorporando um documento PDF com fallback amigável -->
<object data="relatorio-financeiro.pdf" type="application/pdf" width="100%" height="500">
    <div class="wzw-pdf-fallback">
        <p>📄 Seu navegador não suporta a visualização direta de arquivos PDF.</p>
        <a href="relatorio-financeiro.pdf" download class="btn-download">
            Baixar Relatório em PDF (3.2 MB) →
        </a>
    </div>
</object>

<!-- Injeção direta de arquivo PDF ou mídia externa -->
<embed src="contrato-prestacao-servicos.pdf" type="application/pdf" width="100%" height="450">

<picture>
    <!-- 1. Se a tela for até 640px, serve o corte mobile em WebP -->
    <source media="(max-width: 640px)" srcset="banner-mobile.webp" type="image/webp">
    
    <!-- 2. Se o navegador suportar o formato AVIF de última geração no desktop -->
    <source srcset="banner-desktop.avif" type="image/avif">
    
    <!-- 3. Se suportar WebP no desktop -->
    <source srcset="banner-desktop.webp" type="image/webp">
    
    <!-- 4. O elemento <img> é OBRIGATÓRIO (é ele quem renderiza na tela!) -->
    <img src="banner-fallback.jpg" alt="Apresentação da Web Academy" width="1200" height="600" loading="lazy">
</picture>

<div class="wzw-media-showcase">
    <h3>📂 Exibição de Recursos Externos</h3>
    
    <!-- Exemplo 1: Imagem com Troca de Formato e Art Direction -->
    <div class="showcase-item">
        <h4>1. Imagem Adaptável com <picture></h4>
        <picture class="responsive-art">
            <source media="(max-width: 600px)" srcset="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=500&auto=format&fit=crop&q=80">
            <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1000&auto=format&fit=crop&q=80" 
                 alt="Espaço de trabalho de desenvolvimento web" 
                 loading="lazy">
        </picture>
    </div>
 
    <!-- Exemplo 2: Documento com Objeto e Fallback -->
    <div class="showcase-item">
        <h4>2. Documento com <object> e Botão de Ação</h4>
        <object data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" 
                type="application/pdf" 
                class="pdf-viewer">
            <div class="pdf-fallback-box">
                <p>Visualizador inline de PDF não disponível neste dispositivo.</p>
                <a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" 
                   target="_blank" 
                   rel="noopener" 
                   class="btn-pdf-link">
                    Abrir PDF em Nova Aba ↗
                </a>
            </div>
        </object>
    </div>
</div>

.wzw-media-showcase {
    max-width: 720px;
    padding: 24px;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #f8fafc;
}
 
.showcase-item {
    margin-bottom: 24px;
}
 
.showcase-item h4 {
    margin-top: 0;
    color: #38bdf8;
    font-size: 1.05rem;
}
 
.responsive-art img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid #334155;
    display: block;
}
 
.pdf-viewer {
    width: 100%;
    height: 380px;
    border: 1px solid #334155;
    border-radius: 6px;
    background-color: #1e293b;
}
 
.pdf-fallback-box {
    padding: 30px;
    text-align: center;
    background-color: #1e293b;
    color: #94a3b8;
    border-radius: 6px;
}
 
.btn-pdf-link {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 18px;
    background-color: #38bdf8;
    color: #0f172a;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 700;
}