<!-- Productos y Servicios -->
<div class="uk-section uk-section-default">
    <div class="uk-container">
        <p class="uk-heading-small uk-text-center" style="color: #004d77;">Productos & Servicios</p>
        <div class="uk-text-center uk-text-large" style="color: #004d77;">
            <p>Conoce nuestras soluciones.</p>
        </div>
        <div class="uk-child-width-1-2@s uk-child-width-1-3@m uk-grid" uk-grid uk-slider="center: true">
            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
                <ul class="uk-slider-items uk-grid">
                    <?php
                    $productos = array(
                        array("img" => "hardware.jpg", "nombre" => "Hardware"),
                        array("img" => "servidores.jpg", "nombre" => "Almacenamiento y Servidores"),
                        array("img" => "software.jpg", "nombre" => "Software")
                    );
                    
                    foreach ($productos as $producto):
                    ?>
                    <li>
                        <div class="uk-inline uk-width-1-1">
                            <a href="<?= $posicion . $producto['img']; ?>" data-caption="<?= $producto['nombre']; ?>">
                                <img class="uk-width-1-1" src="<?= $posicion . $producto['img']; ?>" alt="<?= $producto['nombre']; ?>">
                                <div class="uk-overlay uk-position-bottom">
                                    <p class="uk-text-large" style="color: #ffffff;"><?= $producto['nombre']; ?></p>
                                </div>
                            </a>
                        </div>
                    </li>
                    <?php endforeach; ?>
                </ul>
                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slider-item="previous"></a>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slider-item="next"></a>
            </div>
            <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-top"></ul>
        </div>
    </div>
</div>
