/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }

/* BODY */
body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
  padding-top: 65px;
}

/* HEADER */
header { 
  width:100%; 
  background:#333; 
  position:fixed; 
  top:0; 
  left:0; 
  z-index:1000; 
  border-bottom:1px solid #444; 
}

.navbar { 
  max-width:1200px; 
  margin:0 auto; 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  padding:10px 20px; 
  position: relative; 
}

.logo img { 
  height:45px; 
  width:auto; 
}

.menu { 
  list-style:none; 
  display:flex; 
  gap:30px; 
}

.menu li a { 
  text-decoration:none; 
  font-weight:600;  /* 🔥 ahora en negrita */
  font-size:16px; 
  color:#fff; 
  transition: color 0.3s; 
}

/* Hover en verde */
.menu li a:hover { 
  color:#C3D734; 
}

/* SLIDER */
.slider { position:relative; width:100%; height:400px; overflow:hidden; margin-top:5px; }
.slides { position:relative; width:100%; height:100%; }
.slide { position:absolute; inset:0; opacity:0; transition: opacity 0.6s ease-in-out; }
.slide.active { opacity:1; z-index:1; }
.slide img { width:100%; height:100%; object-fit:cover; }

/* CAPTION */
.caption { width:60%; max-width:800px; height:180px; background: rgba(0,0,0,0.4); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:0 20px; border-radius:10px; }
.caption h2 { font-size:2rem; margin-bottom:5px; font-family:'Open Sans', Helvetica, sans-serif; color:#fff; }
.caption p { font-size:1.1rem; font-family:'Open Sans', Helvetica, sans-serif; color:#fff; }

/* BOTONES SLIDER */
.prev, .next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.5); color:#000; border:none; border-radius:50%; width:35px; height:35px; font-size:18px; cursor:pointer; z-index:10; opacity:1; transition:background 0.3s; }
.prev:hover, .next:hover { background: rgba(255,255,255,0.8); }
.prev{ left:10px; } .next{ right:10px; }

/* TÍTULOS */
.nosotros h2, .servicios h2, .clientes h2, .contacto h2 { font-weight:600; font-size:2rem; margin-bottom:30px; color:#111; font-family: 'Arvo', serif; }

/* NOSOTROS */
.nosotros { background:#F2F8C9; padding:80px 20px; text-align:center; }
.nosotros .nosotros-text { max-width:800px; margin:0 auto; }
.nosotros p { font-weight:300; font-size:1.05rem; color:#333; margin-bottom:20px; line-height:1.8; }

/* SERVICIOS */
.servicios { padding:80px 20px; background:#fff; text-align:center; }
.services-grid { display: flex; flex-wrap: wrap; gap:35px; justify-content: center; align-items: flex-start; }
.service-card { width: 375px; display: flex; flex-direction: column; text-align: left; }
.service-card .service-img { position: relative; width: 100%; height: 280px; overflow: hidden; }
.service-card .service-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card .service-img .overlay { position: absolute; inset: 0; background-color: rgba(50,50,50,0.5); opacity: 0; transition: opacity 0.3s ease; }
.service-card .service-img:hover .overlay { opacity: 1; }
.service-card .service-title { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.7); color: #fff; text-align: center; padding: 10px 0; font-size: 1.2rem; }
.service-card p { font-size: 0.95rem; margin-top: 10px; color: #333; }

/* CLIENTES */
.clientes { padding:80px 20px; background:#F2F8C9; text-align:center; }
.clientes-carousel { overflow:hidden; width:100%; position:relative; }
.carousel-track { display:flex; gap:40px; animation: scroll-left 30s linear infinite; }
.carousel-track img { height:70px; width:auto; flex-shrink:0; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* CONTACTO */
.contacto { padding:80px 20px; background:#fff; text-align:center; }
.contacto form { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:15px; align-items:flex-start; }
.contacto input, .contacto textarea { padding:10px; border:1px solid #ccc; border-radius:5px; font-size:1rem; width:100%; }
.contacto button.btn-enviar { width:auto; padding:12px 25px; margin-top:10px; display:inline-block; background:#C3D734; color:#fff; border:none; font-size:1rem; cursor:pointer; border-radius:5px; transition: background 0.3s; align-self: center; } /* centrado vertical */
.contacto button.btn-enviar:hover { background:#A7BD2E; }
.form-message { display:none; font-size:1rem; margin-bottom:15px; padding:12px; border-radius:5px; }
.form-message.success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.form-message.error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.form-message.show { display:block; }
.contacto p.contact-info { margin-top:40px; } /* misma distancia que el footer */
.contact-info {
  margin-top: 50px; /* misma separación que el footer */
  font-size: 1rem;
  color: #333;
  text-align: center;
}

/* FOOTER */
footer { background:#222; color:#fff; text-align:center; padding:20px; }

/* RESPONSIVE */
@media (max-width: 992px) {
  .menu { display: none; flex-direction: column; gap: 10px; background:#fff; position:absolute; top:65px; right:20px; padding:10px 20px; border:1px solid #e5e5e5; border-radius:5px; z-index:1001; }
  .menu.active { display:flex; }
  .hamburger { display:flex; }
  .caption { width:80%; height:auto; padding:15px; }
}
@media (max-width: 576px) { .service-card { width: 100%; } }

/* BOTON ACCESO CLIENTES */
.menu .btn-clientes {
  background-color: #666; /* gris medio */
  color: #fff;            /* texto blanco */
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: normal;    /* texto normal, no negrita */
  text-decoration: none;
  transition: background 0.3s ease;
}

.menu .btn-clientes:hover {
  background-color: #444; /* gris más oscuro al pasar el mouse */
  color: #fff;            /* texto sigue blanco */
}

/* PORTFOLIO */
.portfolio {
  padding:80px 20px;
  background:#fff;
  text-align:center;
}

.portfolio h2 {
  font-family: 'Arvo', serif;
  font-weight:700;
  font-size:2rem;
  margin-bottom:40px;
  color:#111;
}

/* Grid de imágenes */
.portfolio-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:20px;
}

/* Imágenes */
.portfolio-grid img {
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
}

/* Hover */
.portfolio-grid img:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* WHATSAPP FLOTANTE */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  z-index: 999;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform .2s ease;
}

.whatsapp-float img {
  width: 32px;
  height: 32px;
}

.whatsapp-float:hover {
  transform: scale(1.08);
}

/* CONTACTO NUEVO LAYOUT */
.contacto-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.contacto-info-box {
  flex: 1 1 45%;
  text-align: left;
}

.contacto-info-box h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #111;
  font-weight: 700;
}

.contacto-info-box p {
  font-size: 1rem;
  margin-bottom: 12px;
  color: #333;
  line-height: 1.6;
}

.instagram-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
  font-size: 1rem;
  color: #333;
  text-decoration: none;
  font-weight: 600;
}

.instagram-link img {
  width: 28px;
  height: 28px;
}

/* FORMULARIO A LA DERECHA */
.contacto-form {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contacto-form input,
.contacto-form textarea {
  width: 100%;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .contacto-flex {
    flex-direction: column;
    align-items: center;
  }

  .contacto-info-box, 
  .contacto-form {
    flex: 1 1 100%;
  }

  .contacto-info-box {
    text-align: center;
  }

  .instagram-link {
    justify-content: center;
  }
}

.contacto h2 {
  text-align: center !important;
  width: 100%;
}
/* Ajustes específicos para CONTACTO (prioridad al final del CSS) */
.contacto h2 {
  text-align: center;
  margin-bottom: 28px;
}

/* Forzar que la columna izquierda mantenga su formato en pantallas grandes */
.contacto-info-box {
  text-align: left;
  min-width: 280px;        /* evita que el contenido se compacte y baje */
  max-width: 48%;          /* mantiene la proporción con el form */
}

/* Asegura que los párrafos dentro se muestren uno por línea */
.contacto-info-box p {
  display: block;
  margin: 8px 0;
  white-space: normal;
}

/* Link de email y redes */
.contacto-info-box a { color: inherit; text-decoration: none; }
.contacto-info-box a:hover { text-decoration: underline; }

/* En mobile, se apilan y se centran como antes */
@media (max-width: 768px) {
  .contacto-info-box { max-width: 100%; min-width: auto; text-align: center; }
  .contacto-form { max-width: 100%; }
  .instagram-link { justify-content: center; margin: 10px auto 0; display:inline-flex; }
}
.portfolio {
  padding-bottom: 20px !important;
}