/* 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:#fff; position:fixed; top:0; left:0; z-index:1000; border-bottom:1px solid #e5e5e5; }
.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:300; font-size:16px; color:#666; transition: color 0.3s; }
.menu li a:hover { color:#81171b; } /* rollover bordo */

/* HAMBURGUESA */
.hamburger { display: none; flex-direction: column; gap: 5px; border: none; background: none; cursor: pointer; }
.hamburger span { display: block; width: 25px; height: 3px; background-color: #666; transition: background 0.3s; }

/* 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:'Open Sans', Helvetica, sans-serif; }

/* NOSOTROS */
.nosotros { background:#f0f0f0; 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:#f0f0f0; 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:#d60000; 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:#a50000; }
.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%; } }