<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elyon Sistem | Servicios Profesionales</title>

<style>
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Segoe UI', sans-serif;
}

body{
    background:#f4f6f9;
}

/* NAV */
header{
    background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
    position:sticky;
    top:0;
    z-index:100;
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 40px;
}

.logo{
    color:#fff;
    font-size:26px;
    font-weight:bold;
}

nav ul{
    display:flex;
    list-style:none;
}

nav ul li a{
    color:white;
    padding:10px 15px;
    text-decoration:none;
    transition:.3s;
}

nav ul li a:hover{
    background:rgba(255,255,255,0.2);
    border-radius:5px;
}

/* BANNER */
.banner{
    height:400px;
    background:url('https://images.unsplash.com/photo-1522071820081-009f0129c71c') center/cover;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    position:relative;
}

.banner::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.6);
}

/* TITULO 3D */
.banner h1{
    font-size:60px;
    position:relative;
    text-shadow:
        2px 2px 0 #1e3c72,
        4px 4px 0 #000,
        6px 6px 10px rgba(0,0,0,0.5);
    animation:float 3s ease-in-out infinite;
}

@keyframes float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

.banner p{
    position:relative;
    font-size:20px;
}

/* CONTENEDOR */
.container{
    max-width:1200px;
    margin:60px auto;
    padding:20px;
}

.section-title{
    text-align:center;
    font-size:32px;
    margin-bottom:40px;
    color:#203a43;
}

/* TARJETAS */
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.service-card{
    background:white;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    transition:.4s;
}

.service-card:hover{
    transform:translateY(-10px) scale(1.03);
}

.service-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

.service-info{
    padding:20px;
}

/* CARRUSEL */
.carousel{
    width:100%;
    overflow:hidden;
    border-radius:10px;
}

.carousel-track{
    display:flex;
    animation:slide 12s infinite;
}

.carousel img{
    width:100%;
    height:300px;
    object-fit:cover;
}

@keyframes slide{
    0%{transform:translateX(0);}
    25%{transform:translateX(-100%);}
    50%{transform:translateX(-200%);}
    75%{transform:translateX(-300%);}
    100%{transform:translateX(0);}
}

/* FOOTER */
footer{
    background:#203a43;
    color:white;
    text-align:center;
    padding:20px;
}

/* RESPONSIVE */
@media(max-width:768px){
    .banner h1{font-size:35px;}
}
</style>
</head>

<body>

<header>
<nav>
<div class="logo">Elyon Sistem</div>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#tecnologia">Tecnología</a></li>
<li><a href="#eventos">Eventos</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>

<section class="banner" id="inicio">
<div>
<h1>Elyon Sistem</h1>
<p>Soluciones tecnológicas y eventos de alto nivel</p>
</div>
</section>

<!-- CARRUSEL PRO -->
<section class="container">
<h2 class="section-title">Galería</h2>

<div class="carousel">
<div class="carousel-track">
<img src="C:\Users\ROBERTO DIAZ V\Desktop\pagina\img\evento 1.jpg">
<img src="C:\Users\ROBERTO DIAZ V\Desktop\pagina\img\evento 2.jpg">
<img src="C:\Users\ROBERTO DIAZ V\Desktop\pagina\img\evento 3.jpg">
<img src="C:\Users\ROBERTO DIAZ V\Desktop\pagina\img\evento 4.jpg">
</div>
</div>

</section>

<section class="container" id="tecnologia">
<h2 class="section-title">Servicios Técnicos</h2>

<div class="services-grid">

<div class="service-card">
<img src="https://images.unsplash.com/photo-1593642634367-d91a135587b5">
<div class="service-info">
<h3>💻 Computadoras</h3>
<p>Mantenimiento, limpieza, optimización y upgrades.</p>
</div>
</div>

<div class="service-card">
<img src="https://hiraoka.com.pe/media/mageplaza/blog/post/c/o/como-instalar-una-impresora.jpg">
<div class="service-info">
<h3>🖨️ Impresoras</h3>
<p>Recarga, reparación y mantenimiento completo.</p>
</div>
</div>
<!-- Servicios de Eventos -->
<section class="container" id="eventos">
    <h2 class="section-title">Arriendo de Maquinaria</h2>
    <div class="services-grid">

        <!-- Palomitas -->
        <div class="service-card">
            <img src="https://thumbs.dreamstime.com/b/carro-de-palomitas-rojas-con-paneles-transparentes-que-muestran-reci%C3%A9n-cortadas-pegatina-popcorn-en-el-frente-dise%C3%B1o-tradicional-404614582.jpg?w=768" alt="Maquina de Palomitas">
            <div class="service-info">
                <h3>🍿 Máquina de Palomitas</h3>
                <p>El clásico sabor a cine. Perfectas para cumpleaños, colegios y eventos familiares. Incluye insumos y operación sencilla.</p>
            </div>
        </div>