:root{
  --primary:#f57c00;
  --primary-dark:#e65c00;
  --text:#333;
  --light:#f9f9f9;
}

*{
  box-sizing:border-box;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
  color:var(--text);
  line-height:1.6;
  background:#fff;
}

/* ===== HERO ===== */
.hero-mantenimiento{
  background:url('../images/mantenimiento.webp') center/cover no-repeat;
  height:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  text-align:center;
}

.hero-mantenimiento::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.hero-mantenimiento h1{
  position:relative;
  color:#fff;
  font-size:2.4rem;
  max-width:900px;
  padding:0 1rem;
}

/* ===== CONTENEDOR ===== */
.container{
  max-width:900px;
  margin:2.5rem auto;
  padding:0 1rem;
}

/* ===== CAJAS DE CONTENIDO ===== */
.info-box{
  background:var(--light);
  border:1px solid #ddd;
  border-radius:8px;
  padding:1.5rem;
  margin-bottom:2rem;
}

.info-box h2{
  margin-top:0;
  color:var(--primary);
  font-size:1.5rem;
}

/* ===== LISTAS ===== */
.lista-servicios{
  padding-left:1.2rem;
  margin-top:.5rem;
}

.lista-servicios li{
  margin-bottom:.4rem;
}

/* ===== SECCIÓN PRECIO ===== */
.pricing{
  background:#fff3e0;
  border-left:5px solid var(--primary);
  padding:1.2rem;
  font-size:1.1rem;
  margin-bottom:2rem;
}

/* ===== FORMULARIO ===== */
form{
  background:#fff;
  padding:1.5rem;
  border-radius:8px;
  border:1px solid #eee;
  margin-bottom:2.5rem;
}

form h2{
  margin-top:0;
  color:var(--primary);
}

label{
  display:block;
  margin:.8rem 0 .3rem;
  font-weight:bold;
}

input, select{
  width:100%;
  padding:.65rem;
  border-radius:5px;
  border:1px solid #ccc;
  font-size:1rem;
}

button{
  margin-top:1.6rem;
  background:var(--primary);
  color:#fff;
  padding:.9rem 1.6rem;
  border:none;
  border-radius:5px;
  font-size:1.05rem;
  font-weight:bold;
  cursor:pointer;
}

button:hover{
  background:var(--primary-dark);
}

/* ===== FOOTER ===== */
footer{
  background:#f5f5f5;
  text-align:center;
  padding:2rem 1rem;
  font-size:.9rem;
}