/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#f4f4f4;color:#333}
.navbar{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 40px;background:transparent;z-index:10}
.navbar a{color:#fff;text-decoration:none}.navbar ul{display:flex;gap:1rem;list-style:none}.nav-logo{width:80px}
.hero{position:relative;height:100vh;background:url('Imagenes/banner.png') center/cover no-repeat;display:flex;justify-content:center;align-items:center;text-align:center}
.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero-content{position:relative;z-index:2;color:#fff;max-width:800px;padding:20px}
.hero h2{font-size:4rem}.hero p{font-size:1.4rem;margin:20px 0}
.cta{background:#00aaff;color:#fff;border:none;padding:15px 40px;border-radius:8px;cursor:pointer}
.productos,.testimonios{padding:3rem 2rem;text-align:center}
.grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}
.card{background:#fff;width:250px;padding:1rem;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.card img{width:100%;border-radius:8px}
.slider{max-width:700px;margin:auto}.slide{display:none}.slide.active{display:block}.perfil{width:80px;height:80px;border-radius:50%}
.footer{background:#000;color:#fff;text-align:center;padding:2rem}.footer-logo{width:100px}
.social-icons{display:flex;justify-content:center;gap:1rem;margin-top:1rem}
.social-icons a{display:flex;align-items:center;gap:.4rem;color:#fff;text-decoration:none}
.social-icons img{width:18px;height:18px}
@media(max-width:768px){.navbar{flex-direction:column;position:relative;background:#000}.hero h2{font-size:2.2rem}.hero p{font-size:1.1rem}}/* Logo con efecto hover */
.nav-logo {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.nav-logo:hover {
  transform: scale(1.1) rotate(-3deg);
  filter: drop-shadow(0 0 8px #00f);
}

/* Links con subrayado animado */
.navbar nav ul li a {
  position: relative;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
.navbar nav ul li a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #00f;
  transition: width 0.3s ease;
}
.navbar nav ul li a:hover {
  color: #00f;
}
.navbar nav ul li a:hover::after {
  width: 100%;
}
.cta-btn {
  background: linear-gradient(90deg, #007bff, #00f);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px #00f;
}
.cta-btn:active {
  transform: scale(0.95);
}
body {
  background: linear-gradient(-45deg, #000, #111, #222, #000);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
}
@keyframes gradientMove {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
.testimonios {
  text-align: center;
  color: #fff;
  padding: 40px 20px;
}
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.slide {
  flex: 0 0 80%;
  margin: 0 10px;
  background: rgba(0,0,0,0.6);
  padding: 20px;
  border-radius: 10px;
  scroll-snap-align: center;
  transition: transform 0.3s ease;
}
.slide:hover {
  transform: scale(1.05);
}
.footer {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.social-icons a {
  margin: 0 10px;
  color: #00f;
  text-decoration: none;
  transition: color 0.3s ease;
}
.social-icons a:hover {
  color: #fff;
}
.hero {
  position: relative;
  height: 100vh; /* ocupa toda la pantalla */
  overflow: hidden;
}

.video-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ajusta el video sin deformarlo */
  z-index: 1;
}
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-banner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-content {
  position: absolute;
  top: 50%; /* centrado vertical */
  left: 50%; /* centrado horizontal */
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2; /* encima del video */
}

.hero-content .logo {
  width: 120px; /* ajusta tamaño del logo */
  margin-bottom: 20px;
}

.cta {
  background: #ff0000;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 18px;
  cursor: pointer;
  margin-top: 20px;
}