* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
body { color:#333; background:#fff; line-height:1.6; }

/* Header */
header {
  background:#fff;
  border-bottom:1px solid #eee;
  height:80px;            /* altura fija del header */
  position:sticky;
  top:0;
  z-index:100;
}
.header-flex {
  display:flex;
  align-items:center;     /* centra verticalmente logo y menú */
  justify-content:space-between;
  width:90%;
  margin:auto;
  height:100%;
}
.logo {
  height:150px;            /* logo grande pero contenido dentro de la barra */
  max-height:150px;
  transform: translateY(7px); /* lo baja visualmente */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo:hover {
  transform: translateY(2px) scale(1.05); /* pequeño zoom */
  filter: brightness(1.2); /* un poco más de brillo */
}

header nav a {
  margin:0 15px;
  color:#333;
  text-decoration:none;
  font-weight:500;
}
header nav a:hover {
  color:#ff6600;
}
.btn-nav {
  background:#ff6600;
  color:#fff !important;
  padding:6px 12px;
  border-radius:5px;
}

/* Hero */
.hero { background:url("img/bg-hero.jpg") no-repeat center/cover; height:90vh; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; position:relative; }
.hero-overlay { background:rgba(0,0,0,0.6); padding:2rem; border-radius:10px; }
.hero h1 { font-size:2.5rem; margin-bottom:1rem; }
.hero p { font-size:1.2rem; margin-bottom:1.5rem; }
.btn { background:#ff6600; color:#fff; padding:0.8rem 1.2rem; border-radius:5px; text-decoration:none; }
.btn:hover { background:#ff9900; }



/* Sections */
.section { padding:4rem 1rem; width:90%; margin:auto; }
.section.alt { background:#f9f9f9; }
.section h2 { text-align:center; margin-bottom:2rem; color:#222; }

/* Cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
.card { background:#fff; padding:2rem; border:1px solid #eee; border-radius:8px; text-align:center; transition:all 0.3s ease; }
.card:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); transform:translateY(-5px); }

/* Portfolio */
.portfolio-item { height:70vh; display:flex; align-items:center; justify-content:center; position:relative; background-size:cover; background-position:center; }
.portfolio-item::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); }
.portfolio-item .overlay { position:relative; color:#fff; text-align:center; padding:2rem; border-radius:8px; background:rgba(0,0,0,0.4); }
#medula { background-image:url("img/bg-medula.jpg"); }
#pesaje { background-image:url("img/bg-pesaje.jpg"); }
#conectividad { background-image:url("img/bg-conectividad.jpg"); }
#language-bridging { background-image:url("img/bg-web.jpg"); }

/* Footer */
footer { background:#222; color:#fff; text-align:center; padding:1rem; margin-top:2rem; }

/* Formulario de contacto */
.contact-form {
  max-width: 600px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form .form-group {
  display: flex;
  flex-direction: column;
}

.contact-form input,
.contact-form textarea {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #ff6600;
  box-shadow: 0 0 5px rgba(255, 102, 0, 0.3);
}

.contact-form button {
  align-self: center;
  background: #ff6600;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: #ff9900;
}

@media (max-width: 768px) {
  .logo {
    height:70px;
    transform: translateY(20px); /* lo baja visualmente */
  }
}

/* Animación para el botón flotante */
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* Botón flotante WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.3s ease;
}

.whatsapp-float:hover {
  background-color: #1ebe5c;
  transform: scale(1.1);
}

.text-center {
  text-align: center;
  margin: 0 auto;
}



/* Portfolio con hover moderno */
.portfolio-item {
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.portfolio-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  transition: background 0.4s ease;
}

.portfolio-item .overlay {
  position: relative;
  color: #fff;
  text-align: center;
  padding: 2rem;
  border-radius: 8px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(2px); /* 🔥 blur suave de fondo */
  transition: transform 0.4s ease, background 0.4s ease, backdrop-filter 0.4s ease;
}

/* Hover */
.portfolio-item:hover {
  transform: scale(1.03); /* 🔥 zoom leve en la sección */
}

.portfolio-item:hover::before {
  background: rgba(0,0,0,0.65); /* 🔥 oscurece más la imagen */
}

.portfolio-item:hover .overlay {
  transform: translateY(-10px); /* 🔥 efecto de levantar el contenido */
  background: rgba(0,0,0,0.5);  /* 🔥 hace que el texto resalte más */
  backdrop-filter: blur(5px);   /* 🔥 aumenta el blur */
}

/* Login */
.login-container {
  max-width: 400px;
  margin: auto;
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.login-form input {
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.login-form input:focus {
  outline: none;
  border-color: #ff6600;
  box-shadow: 0 0 5px rgba(255,102,0,0.3);
}

.login-form button {
  background: #ff6600;
  color: #fff;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

.login-form button:hover {
  background: #ff9900;
}

/* Redes sociales en footer */
.social-links {
  margin-top: 1rem;
}

.social-links a {
  color: #fff;
  margin: 0 10px;
  font-size: 1.4rem;
  text-decoration: none;   /*quita subrayado */
  transition: color 0.3s, transform 0.3s;
}

.social-links a:hover {
  color: #ff6600;
  transform: scale(1.2); /* pequeño zoom al pasar */
}