<?php
/**
 * Banner Compacto de Métodos de Pago PagoPar
 * Versión adaptativa que muestra más métodos en PC
 */
?>

<div class="payment-methods-compact">
    <div class="payment-compact-container">
        <div class="payment-compact-header">
            <i class="fas fa-credit-card payment-header-icon"></i>
            <span class="payment-compact-text">Métodos de pago disponibles</span>
        </div>
        <div class="payment-compact-logos">
            <!-- Métodos principales (siempre visibles) -->
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/visa.png" alt="Visa" loading="lazy">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/mastercard.png" alt="Mastercard" loading="lazy">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/aex.png" alt="American Express" loading="lazy">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/diners.png" alt="Diners Club" loading="lazy">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/tigo-money.png" alt="Tigo Money" loading="lazy">
            
            <!-- Métodos adicionales para tablet y PC -->
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/billetera-personal.png" alt="Billetera Personal" loading="lazy" class="payment-extra payment-tablet">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/credifielco.png" alt="Credifielco" loading="lazy" class="payment-extra payment-tablet">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/unica.png" alt="Única" loading="lazy" class="payment-extra payment-tablet">
            
            <!-- Métodos adicionales solo para PC -->
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/panal.png" alt="Panal" loading="lazy" class="payment-extra payment-desktop">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/pagoexpress.png" alt="Pago Express" loading="lazy" class="payment-extra payment-desktop">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/aquipago.png" alt="Aquí Pago" loading="lazy" class="payment-extra payment-desktop">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/practipago.png" alt="Practi Pago" loading="lazy" class="payment-extra payment-desktop">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/credicard.png" alt="Credicard" loading="lazy" class="payment-extra payment-desktop">
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/cabal.png" alt="Cabal" loading="lazy" class="payment-extra payment-desktop">
            
            <!-- Logo de PagoPar (siempre visible en PC, oculto en móvil/tablet) -->
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/pagopar.png" alt="PagoPar" loading="lazy" class="payment-brand payment-desktop">
            
            <!-- Procesado por PagoPar (visible solo en desktop) -->
            <img src="https://cdn.pagopar.com/assets/images/extra/footer/light/procesado-por-pagopar.png" alt="Procesado por PagoPar" loading="lazy" class="payment-powered payment-desktop">
        </div>
        <div class="payment-compact-footer">
            <i class="fas fa-shield-alt payment-security-icon"></i>
            <span class="payment-compact-security">Pagos seguros y protegidos</span>
        </div>
    </div>
</div>