/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Tipografía y fondo */
body {
  font-family: 'Arial', sans-serif;
  background: #000;
  color: #fff;
  line-height: 1.6;
}

/* Contenedor central */
main { padding: 2rem; max-width: 1200px; margin: auto; }

/* Navbar */
header { position: sticky; top: 0; background: #111; z-index: 1000; }
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}
.navbar .logo img { height: 40px; }
.nav-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.nav-menu li a {
  color: #ccc; text-decoration: none; font-weight: 500;
}
.nav-menu li.active a,
.nav-menu li a:hover {
  color: #28a745;
}

/* Language selector */
#lang-selector {
  list-style: none;
  display: flex;
  gap: 0.5rem;
}
#lang-selector li {
  font-size: 0.9rem;
}
#lang-selector li.active { font-weight: bold; }
#lang-selector li a { color: #ccc; text-decoration: none; }
#lang-selector li a:hover { color: #28a745; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 4rem 2rem;
}
.hero-content h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero-content p { margin-bottom: 1.5rem; }
.hero-image img { width: 100%; }

/* Benefits */
.benefits { text-align: center; padding: 2rem 0; }
.benefits-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}
.benefits-list li { background: #111; padding: 1rem 2rem; border-radius: 8px; }

/* Testimonials */
.testimonials { padding: 2rem 0; }
.testimonial-cards {
  display: flex;
  gap: 2rem;
  justify-content: center;
}
.card {
  background: #111; padding: 1.5rem; border-radius: 8px; max-width: 300px;
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; margin-top: 2rem;
}
.service-card img { width: 100%; border-radius: 8px; }
.service-card h2 { margin: 1rem 0; }

/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; margin-top: 2rem;
}
.product-card img { width: 100%; border-radius: 8px; }
.product-card h2 { margin: 1rem 0; }

/* Posts grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem; margin-top: 2rem;
}
.post-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 8px; }
.post-card h2 { margin: 1rem 0; }

/* Contact form */
.contact form {
  display: grid;
  gap: 1rem;
  max-width: 600px;
  margin-top: 1rem;
}
.contact input, .contact textarea {
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
}

/* Footer */
footer {
  background: #111;
  padding: 1.5rem 2rem;
  text-align: center;
}
.footer-menu { list-style: none; display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.footer-menu li a { color: #ccc; text-decoration: none; }
.footer-menu li a:hover { color: #28a745; }

/* Animaciones */
.fade-in { opacity: 0; animation: fadeIn 1s forwards; }
@keyframes fadeIn {
  to { opacity: 1; }
}

/* Botón */
.btn {
  background: #28a745;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero, .intro {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 2rem 1rem;
  }
  .hero-content h1, .intro h1 {
    font-size: 1.8rem;
  }
  .navbar {
    flex-direction: column;
    gap: 1rem;
  }
  .nav-menu {
    flex-direction: column;
    gap: 1rem;
  }
  #lang-selector {
    justify-content: center;
  }
}